怎么使用纯CSS实现宝路薄荷糖的动画

居中显示：

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background-color:silver;

}

定义容器尺寸：

.spinner{

width:50vmin;

height:50vmin;

position:relative;

}

用before伪元素画出1个像宝路薄荷糖状的黑色圆环：

.spinner::before{

content:'';

position:absolute;

box-sizing:border-box;

width:inherit;

height:inherit;

border:12.5vminsolid;

border-radius:50%;

}

接下来制作动画效果。

设置透视景深：

body{

perspective:400px;

}

让圆环在z轴上运动：

.spinner::before{

animation:spin1.5sease-in-outinfinitebothreverse;

}

@keyframesspin{

0%,100%{

transform:translateZ(10vmin);

}

60%{

transform:translateZ(-10vmin);

}

}

让圆环在z轴距离较大时稍稍倾斜：

@keyframesspin{

0%,100%{

transform:translateZ(10vmin)rotateX(25deg);

}

60%{

transform:translateZ(-10vmin);

}

}

增加缩放效果：

@keyframesspin{

0%,100%{

transform:translateZ(10vmin)rotateX(25deg);

}

33%{

transform:translateZ(-10vmin)scale(0.4);

}

60%{

transform:translateZ(-10vmin);

}

}

用after伪元素再画出一个白色的圆环，并且让它的动画延迟动画总长的一半时间：

.spinner::before,

.spinner::after{

/*略*/

animation:spin1.5sease-in-outinfinitebothreverse;

}

.spinner::after{

border-color:white;

animation-delay:-0.75s;

}

接下来制作容器的动画效果，为了不受子元素动画的影响，先暂时屏蔽伪元素的动画效果。

.spinner::before,

.spinner::after{

/*animation:spin1.5sease-in-outinfinitebothreverse;*/

}

增加容器沿x轴旋转的动画效果，动画时间为子元素动画时间的2倍：

.spinner{

animation:wobble3sease-in-outinfinite;

}

@keyframeswobble{

0%,100%{

transform:rotateX(15deg);

}

50%{

transform:rotateX(60deg);

}

}

增加容器沿y轴旋转的动画效果：

@keyframeswobble{

0%,100%{

transform:rotateX(15deg)rotateY(60deg);

}

50%{

transform:rotateX(60deg)rotateY(-60deg);

}

}

增加容器整体旋转的动画效果：

@keyframeswobble{

0%,100%{

transform:rotateX(15deg)rotateY(60deg);

}

50%{

transform:rotateX(60deg)rotateY(-60deg)rotate(180deg);

}

}

打开子元素的动画效果，使子元素的动画效果和容器的动画效果叠加：

.spinner::before,

.spinner::after{

animation:spin1.5sease-in-outinfinitebothreverse;

}

最后，使子元素在3d空间上运动：

.spinner{

transform-style:preserve-3d;

}

“怎么使用纯CSS实现宝路薄荷糖的动画”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

名称栏目：怎么使用纯CSS实现宝路薄荷糖的动画
链接URL：http://kswjz.com/article/ihhohc.html