重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
怎么用纯CSS实现一个圆环旋转错觉的动画效果
本文小编为大家详细介绍“怎么用纯CSS实现一个圆环旋转错觉的动画效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用纯CSS实现一个圆环旋转错觉的动画效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于企业网站制作,高端网页制作,对活动板房等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业网站推广优化,H5建站,响应式网站。
效果图:
代码解读
定义dom，容器中包含10个
子元素，每个
子元素内还有一个子元素：
当前文章：怎么用纯CSS实现一个圆环旋转错觉的动画效果
文章链接：http://cqcxhl.com/article/jgppoc.html
定义容器尺寸：
.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,
morphvar(--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实现一个圆环旋转错觉的动画效果”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。
当前文章：怎么用纯CSS实现一个圆环旋转错觉的动画效果
文章链接：http://cqcxhl.com/article/jgppoc.html