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

本文链接：https://blog.youkuaiyun.com/qq20004604/article/details/52973960

本文详细介绍如何使用HTML与CSS技术逐步复现360安全卫士PC端软件左下角的三个图标及其动画效果，包括布局设置、动画实现等关键技术点。

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

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

具体DEMO见

http://jianwangsan.cn/LooksLike360safe/index.html

代码见：

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;
}

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