前端日常实践：149#视频演示了如何用纯CSS制作BoroMints的动画
时间：2023-04-02 21:12:04
HTML
预览效果。按右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/oagrvz互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cRbqJcD源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，只有1个元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:silver;}定义容器的大小：.spinner{width:50vmin;高度：50vmin；position:relative;}使用before伪元素绘制一个黑色圆环，就像薄荷糖一样：.spinner::before{content:'';位置：绝对；框大小：边框框；宽度：继承；身高：继承；边界：12.5vmin实心；border-radius:50%;}接下来制作动画效果。设置透视景深：body{perspective:400px;}让环在z轴上移动：.spinner::before{animation:spin1.5sease-in-outinfinitebothreverse;}@keyframesspin{0%,100%{变换:translateZ(10vmin);}60%{变换：translateZ(-10vmin);}}当z轴距离较大时，让环稍微倾斜：@keyframesspin{0%,100%{transform:translateZ(10vmin)rotateX(25deg);}60%{变换：translateZ(-10vmin);}}增加缩放效果：@keyframesspin{0%,100%{transform:translateZ(10vmin)rotateX(25deg);}33%{变换：translateZ(-10vmin)scale(0.4);}60%{变换：translateZ(-10vmin);}}使用after伪元素绘制一个白色圆圈并将其动画延迟动画总长度的一半：.spinner::before,.spinner::after{/*slightly*/animation:spin1.5sease-in-outinfinitebothreverse;}.spinner::after{border-color:white;animation-delay:-0.75s;}接下来制作容器的动画效果。为了不被子元素的动画影响，先暂时屏蔽掉伪元素的动画效果。.spinner::before,.spinner::after{/*动画：自旋1.5秒缓入缓出无限反转；*/}增加容器沿x轴旋转的动画效果，动画时间为子元素动画时间的2倍：.spinner{animation:wobble3sease-in-outinfinite;}@keyframes摆动{0%,100%{变换:rotateX(15deg);}50%{变换：rotateX(60deg);}}增加容器沿y轴旋转的动画效果：@keyframeswobble{0%,100%{transform:rotateX(15deg)rotateY(60deg);}50%{变换：rotateX(60deg)rotateY(-60deg);}}增加容器整体旋转动画效果：@keyframeswobble{0%,100%{transform:rotateX(15deg)rotateY(60deg);}50%{变换：rotateX(60deg)rotateY(-60deg)rotate(180deg);}}打开子元素子元素的动画效果和容器的动画效果叠加：.spinner::before,.spinner::after{animation:spin1.5sease-in-outinfinitebothreverse;}最后，在3d空间中制作Motion中的子元素：.spinner{transform-style:preserve-3d;}就大功告成了！
