怎么用純CSS實現一個圓環旋轉錯覺的動畫效果

本文小編為大家詳細介紹“怎么用純CSS實現一個圓環旋轉錯覺的動畫效果”，內容詳細，步驟清晰，細節處理妥當，希望這篇“怎么用純CSS實現一個圓環旋轉錯覺的動畫效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

效果圖:

　　代碼解讀

　　定義dom，容器中包含10個<div>子元素，每個<div>子元素內還有一個<span>子元素：

　　<figureclass="container">

　　<div><span></span></div>

　　<div><span></span></div>

　　<div><span></span></div>

　　<div><span></span></div>

　　<div><span></span></div>

　　<div><span></span></div>

　　<div><span></span></div>

　　<div><span></span></div>

　　<div><span></span></div>

　　<div><span></span></div>

　　</figure>

　　定義容器尺寸：

　　.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實現一個圓環旋轉錯覺的動畫效果”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。