Web前端新拟态图标，效果超赞！

在 B站上看到一个大佬，写了一个很不错的新拟态图标，但是美中不足的就是他没有给CSS样式添加注释，对一些刚刚入手前端的小白（比如我）很不友好，所以我查了一下那些属性的用法做了注释，有兴趣的朋友可以看一下那个视频，放上链接 https://www.bilibili.com/video/BV1U7411C78K

看完视频不理解的小伙伴可以参考一下我的注释，有些地方我做了微微修改，更符合我的理解，不过大体上基本一样，不影响食用（手动狗头）。

*{
	margin: 0;
	padding: 0;
}
/*简单介绍一下常用的一些尺寸单位
百分比：就是元素相对于父级的宽度或高度的百分比，比较常用，宽度和高度都可以
rem：本身是百分比的一种变形，但是这个单位只是基于宽度的百分比，不是基于高度的百分比
vh、vw：基于视口的尺寸，1vh = 1% viewportHeight , 1wh = 1% viewportWidth*/
body{
	width: 100%;
	height: 100vh;
	/*定义body内元素（大盒子div）为弹性盒子*/
	display: flex;
	/*设置弹性元素居中紧挨着填充。*/
	justify-content: center;
	/*弹性元素在该行的侧轴（纵轴）上居中放置*/
	align-items: center;
	background-color: #EFEEEE;
}
.bigbox{
	width: 700px;
	height: 600px;
	/*定义大盒子内的元素(小盒子div)为弹性盒子*/
	display: flex;
	/*弹性元素平均分布在该行上，两边留有一半的间隔空间。即小盒子的div在大盒子里均匀分布 留有空间*/
	justify-content: spa