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

定义容器尺寸：

.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实现一个圆环旋转错觉的动画效果”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。