前端的小玩意（15）——一步一步仿写三个图标和动画

心已赠人 2022-07-15 02:50 89阅读 0赞

**（36）一步一步仿写三个图标和动画**

①参照物：360安全卫士PC端软件，左下角三个图标，如图：

![20161030202546090][]

具体DEMO见

[http://jianwangsan.cn/LooksLike360safe/index.html][http_jianwangsan.cn_LooksLike360safe_index.html]

代码见：

[https://github.com/qq20004604/LooksLike360safe][https_github.com_qq20004604_LooksLike360safe]

/src/components目录下的foot-big-btns.vue文件。

②分析：

1、三个大图标几乎一样，分为上下两部分，上图下字。每个大图标是一个父容器，三个父容器在同一个祖父容器下，高度和祖父容器一致，宽度是自身宽度，然后根据间距设好margin-right的距离，为了方便准确定位，防止三个父容器之间出现额外间距，因此使用float:left；

2、下字没什么好说的，量好高度，字体大小，定好位。然后宽度设为100%，高度和行高、字体大小一致，使用绝对定位，left设为0（这样就撑满父容器的宽度了），top设为父容器顶部到该行顶部的距离，父容器的位置设为相对定位（在这一步根据实际需求，对父容器新增css属性）。

3、上图仔细分析，分为四部分；

【1】外环，颜色最淡；

【2】中环，颜色深一点；

【3】内环，颜色最深；

【4】中部图标；

三个环采取同样处理方法，使用border-radius来处理（缺点，对低版本浏览器不支持，例如IE8）。如果需要兼容低版本浏览器，则使用图片替代之。

具体而言：

**外环：**先定盒模型，设box-sizing为border-box，然后量环宽，具体而言是8px，设总宽度为98px（外环最左到最右），border-radius为总宽度一半49px，再设border属性8px solid\#eff9ff（这个是最左边的外环颜色，另外2个略），这样就做好了外环。

**中环：**思路和外环一样，但宽度要98px减去两倍外环宽度共计16px，最终值是82px。border宽度为6px，其他类似略去不提。

**内环：**和外环中环思路一样的部分，略。不同的是，内环中会涉及到内部填满颜色，另外也有图片（注意，三个图片位置有所不同）。因此，内环中多了一个定位属性position:relative，用于帮助内环中的图片定位。还需要设置background-color这样的属性（但实际情况下，不使用这个）。

**中部图标：**

【1】中部图标分为两种情况，默认情况和鼠标移动上去之后。

【2】默认情况：量好图标大小，定好位，即可。略过不提。

【3】鼠标移动上去：根据实际测试，鼠标移动上去之后发生了以下事件：

<1>内环从外往内填满颜色；

<2>填满后，图标发生动画；

当然，具体可能是两个同步进行的，由于动画速度很快，我不能确定，那么就假设他先填满颜色，再发生动画好了（和同步进行的写法区别不大）；

**填满颜色：**

【1】首先他是动画，是一步一步**从外往内**填满的，而不是瞬间变满；

【2】因为是动画，因此采用animation，具体用法可以百度，一会也会给使用的代码；

【3】又因为是动画，因此需要定动画帧，具体而言，使用@keyframes\{\}，大括号内部填每帧情况，使用百分比，0%是初始，100%是结束状态。

【4】因为是从外往内填满，因此使用镜像渐变**radial-gradient\{\}**，大括号内部是状态值，具体可以百度或者google。简单来说，里面的值用逗号分隔，每个值由颜色和距离组成，距离可以用px也可以用百分比，0%是最内部，100%是最外部。例如：**background-image: radial-gradient(white, white);**表示从内到外都是白色 ，而**background-image: radial-gradient(white, white 80%, \#31b1ff);**表示从内到外80%的地方都是白色，而从80%到100%从白色渐变为\#31b1ff（记得，是渐变，而不是全部变为该色）。而**background-image:radial-gradient(white, white 0%, \#31b1ff);**则表示整个都是\#31b1ff颜色（很奇怪对吧，没渐变对吧，原因是后面直接写了一个background-color的属性，而-image属性的优先级高于color，因此渐变正常，而渐变执行完之后使用了-color属性）。

附代码：

@keyframes changeColorThunder {
        0% {
            background-image: radial-gradient(white, white);
        }
        10% {
            background-image: radial-gradient(white, white 80%, #31b1ff);
        }
        20% {
            background-image: radial-gradient(white, white 60%, #31b1ff);
        }
        30% {
            background-image: radial-gradient(white, white 40%, #31b1ff);
        }
        40% {
            background-image: radial-gradient(white, white 20%, #31b1ff);
        }
        50% {
            background-image: radial-gradient(white, white 0%, #31b1ff);
        }
    }

填充则写完了。

**图标动画：**

【1】仔细分析，三个图标动画不同。

【2】第一个是从右上往中间移动，然后发生类似重力弹起的效果；

【3】第二个是往右转一下，再往左转回原位；

【4】第三个是从中间到右上，再从左下回到中间。

**第一个图标动画：**

还记不记得之前我们用的图标是绝对定位，因此非常简单，更改top和left的值即可。至于重力弹起的效果，那么类似这么写：初始值假如10，最终是0，动画的值则写为：10、5、0、2、0即可。即先减少到最终值，再增加一些，再减少回最终值即可。

**第二个图标动画：**

旋转也很简单，使用transform:rotateY即可，逆时针旋转是负值，顺时针旋转是正值，这里是负值。具体来说，见代码：（这里为了精简，删去了兼容性代码）

@keyframes cleanMove {
        0% {
            transform: rotateZ(0deg);
        }
        17% {
            transform: rotateZ(-30deg);
        }
        34% {
            transform: rotateZ(-60deg);
        }
        50% {
            transform: rotateZ(-90deg);
        }
        67% {
            transform: rotateZ(-60deg);
        }
        84% {
            transform: rotateZ(-30deg);
        }
        100% {
            transform: rotateZ(0deg);
        }
    }

**第三个图标动画：**

和第一个类似，更改top、left值即可。代码略。

至于触发动画，很简单，父容器用伪类css选择器:hover即可，示例：

.big-circle:hover .min-circle.thunder {
        animation: changeColorThunder 0.25s both;
        background-color: #31b1ff;
    }

第一行是变色动画；第二行是设置新的背景色（在变色动画执行完结束后显示出来，之前被覆盖了）

.big-circle:hover .inner.thunder {
        background-position: -750px 0px;
        animation: thunderMove 0.3s both 0.25s;
    }

第一行是更改图标，第二个是触发动画。

具体DEMO见

[http://jianwangsan.cn/LooksLike360safe/index.html][http_jianwangsan.cn_LooksLike360safe_index.html]

代码见：

[https://github.com/qq20004604/LooksLike360safe][https_github.com_qq20004604_LooksLike360safe]

/src/components目录下的foot-big-btns.vue文件。

[20161030202546090]: /images/20220715/04f6d59a04a447a7a7f44f24dfd56d99.png
[http_jianwangsan.cn_LooksLike360safe_index.html]: http://jianwangsan.cn/LooksLike360safe/index.html
[https_github.com_qq20004604_LooksLike360safe]: https://github.com/qq20004604/LooksLike360safe