这篇文章给大家分享的是有关使用纯CSS实现宝路薄荷糖的动画的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
https://github.com/comehope/front-end-daily-challenges
定义 dom,只有 1 个元素:
<div class="spinner"></div>
居中显示:
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.5vmin solid; border-radius: 50%; }
接下来制作动画效果。
设置透视景深:
body { perspective: 400px; }
让圆环在 z 轴上运动:
.spinner::before { animation: spin 1.5s ease-in-out infinite both reverse; } @keyframes spin { 0%, 100% { transform: translateZ(10vmin); } 60% { transform: translateZ(-10vmin); } }
让圆环在 z 轴距离较大时稍稍倾斜:
@keyframes spin { 0%, 100% { transform: translateZ(10vmin) rotateX(25deg); } 60% { transform: translateZ(-10vmin); } }
增加缩放效果:
@keyframes spin { 0%, 100% { transform: translateZ(10vmin) rotateX(25deg); } 33% { transform: translateZ(-10vmin) scale(0.4); } 60% { transform: translateZ(-10vmin); } }
用 after
伪元素再画出一个白色的圆环,并且让它的动画延迟动画总长的一半时间:
.spinner::before, .spinner::after { /*略*/ animation: spin 1.5s ease-in-out infinite both reverse; } .spinner::after { border-color: white; animation-delay: -0.75s; }
接下来制作容器的动画效果,为了不受子元素动画的影响,先暂时屏蔽伪元素的动画效果。
.spinner::before, .spinner::after { /* animation: spin 1.5s ease-in-out infinite both reverse; */ }
增加容器沿 x 轴旋转的动画效果,动画时间为子元素动画时间的2倍:
.spinner { animation: wobble 3s ease-in-out infinite; } @keyframes wobble { 0%, 100% { transform: rotateX(15deg); } 50% { transform: rotateX(60deg); } }
增加容器沿 y 轴旋转的动画效果:
@keyframes wobble { 0%, 100% { transform: rotateX(15deg) rotateY(60deg); } 50% { transform: rotateX(60deg) rotateY(-60deg); } }
增加容器整体旋转的动画效果:
@keyframes wobble { 0%, 100% { transform: rotateX(15deg) rotateY(60deg); } 50% { transform: rotateX(60deg) rotateY(-60deg) rotate(180deg); } }
打开子元素的动画效果,使子元素的动画效果和容器的动画效果叠加:
.spinner::before, .spinner::after { animation: spin 1.5s ease-in-out infinite both reverse; }
最后,使子元素在 3d 空间上运动:
.spinner { transform-style: preserve-3d; }
感谢各位的阅读!关于使用纯CSS实现宝路薄荷糖的动画的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。