效果展示部分

知识点

html:可以先暂时的不用写【后续可以在里面添加元素】 css:选择器，内边距，外边距，flex布局，linear-gradient，可以使圆的颜色进行渐变等

html部分

<body>
    
</body>

css部分【具体的内容已经写成注释啦】

  /*外边距*/
  margin: 0; 
  /*内边距*/
  padding: 0; 
  /* 字体 */
  font-family: 'Courier New', Courier, monospace;
  /*背景颜色*/
  background-color: #FFFFFF;
}
body{
  display: flex;//使用flex布局
  justify-content: center;//元素周围有空白
  align-items: center;
  min-height: 100vh;
  flex-direction: column;//决定了主轴的方向
}
a{
  position:absolute; //处于绝对位置
  display: inline-block; //让元素变成行内元素
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /* 字体颜色 */
  color: black;
  /* 字体大小 */
  font-size: 20px;
  /* 去下划线 */
  text-decoration: none;
  
  background :linear-gradient(#EEFCFB, #E8F3F1,#80DFD8)
 
  
}

类比图形-正方形

整体的思路是不用进行变化的，需要把圆绘制成方形，也就是 border-radius这个属性进行去除，让整个方形没有棱角的进行展示，也是一样，把代码在下面贴出来，着重看更改的部分就可以了~

效果图展示

代码展示

<body>
    <a href="#"></a>
</body>

  /*外边距*/
  margin: 0; 
  /*内边距*/
  padding: 0; 
  /* 字体 */
  font-family: 'Courier New', Courier, monospace;
  /*背景颜色*/
  background-color: #FFFFFF;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
}
a{
  position:absolute; 
  display: inline-block;
  width:300px; 
  height:300px;
  /* 字体颜色 */
  color: black;
  /* 字体大小 */
  font-size: 20px;
  /* 去下划线 */
  text-decoration: none;
  
  background :linear-gradient(#f0a1a8, #f0c9cf,#e9ccd3)
 
  
}

总结

~整体的内容比较简单，重点需要注意是图形的绘制，和渐变效果的属性调制，明天可以将动画加入。

css简单小项目