怎么用纯CSS实现一个圆环旋转错觉的动画效果

本文小编为大家详细介绍“怎么用纯CSS实现一个圆环旋转错觉的动画效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用纯CSS实现一个圆环旋转错觉的动画效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。效果图:
　　代码解读
　　定义dom，容器中包含10个
　　 　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　定义容器尺寸：
　　.container{
　　width:17em;
　　height:17em;
　　font-size:16px;
　　}
　　定义子元素的尺寸，和容器相同：
　　.container{
　　position:relative;
　　}
　　.containerdiv{
　　position:absolute;
　　width:inherit;
　　height:inherit;
　　}
　　在子元素的正中画一个黄色的小方块：
　　.containerdiv{
　　display:flex;
　　align-items:center;
　　justify-content:center;
　　}
　　.containerspan{
　　position:absolute;
　　width:1em;
　　height:1em;
　　background-color:yellow;
　　}
　　增加让小方块左右移动的动画效果，动画时长还会在后面用到，所以定义成变量：
　　.containerspan{
　　–duration:2s;
　　animation:movevar(–duration)infinite;
　　}
　　@keyframesmove{
　　0%,100%{
　　left:calc(10%-0.5em);
　　}
　　50%{
　　left:calc(90%-0.5em);
　　}
　　}
　　用贝赛尔曲线调整动画的时间函数，使小方块看起来就像在左右两侧跳来跳去：
　　.containerspan{
　　animation:movevar(–duration)cubic-bezier(0.6,-0.3,0.7,0)infinite;
　　}
　　增加小方块变形的动画，使它看起来有下蹲起跳的拟人效果：
　　.containerspan{
　　animation:
　　movevar(–duration)cubic-bezier(0.6,-0.3,0.7,0)infinite,
　　m免费云主机、域名orphvar(–duration)ease-in-outinfinite;
　　}
　　@keyframesmorph{
　　0%,50%,100%{
　　transform:scale(0.75,1);
　　}
　　25%,75%{
　　transform:scale(1.5,0.5);
　　}
　　}
　　至此，完成了1个方块的动画。接下来设置多个方块的动画效果。
　　为子元素定义CSS下标变量：
　　.containerdiv:nth-child(1){–n:1;}
　　.containerdiv:nth-child(2){–n:2;}
　　.containerdiv:nth-child(3){–n:3;}
　　.containerdiv:nth-child(4){–n:4;}
　　.containerdiv:nth-child(5){–n:5;}
　　.containerdiv:nth-child(6){–n:6;}
　　.containerdiv:nth-child(7){–n:7;}
　　.containerdiv:nth-child(8){–n:8;}
　　.containerdiv:nth-child(9){–n:9;}
　　旋转子元素，使小方块分布均匀地在容器的四周，围合成一个圆形：
　　.containerp{
　　transform:rotate(calc(var(–n)*40deg));
　　}
　　设置动画延时，现在看起来就像是一群小方块贴着一个圆的内边线在旋转了（但实际上没有任何元素在做旋转运动，大脑感觉到的旋转是一种错觉）：
　　.containerspan{
　　animation-delay:calc(var(–duration)/9*var(–n)*-1);
　　}
　　最后，为小方块上色：
　　.containerspan{
　　background-color:hsl(calc(var(–n)*80deg),100%,70%);
　　}
读到这里，这篇“怎么用纯CSS实现一个圆环旋转错觉的动画效果”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注云技术行业资讯频道。免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@byun.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

相关推荐: HTML中的标签怎么用

这篇文章主要为大家展示了“HTML中的标签怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“HTML中的标签怎么用”这篇文章吧。 标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊…