本文小編為大家詳細(xì)介紹“怎么用純CSS實(shí)現(xiàn)一個(gè)圓環(huán)旋轉(zhuǎn)錯(cuò)覺的動(dòng)畫效果”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“怎么用純CSS實(shí)現(xiàn)一個(gè)圓環(huán)旋轉(zhuǎn)錯(cuò)覺的動(dòng)畫效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站制作,高端網(wǎng)頁制作,對(duì)活動(dòng)板房等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專業(yè)網(wǎng)站推廣優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

效果圖:

代碼解讀

定義dom，容器中包含10個(gè)<div>子元素，每個(gè)<div>子元素內(nèi)還有一個(gè)<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;

}

在子元素的正中畫一個(gè)黃色的小方塊：

.containerdiv{

display:flex;

align-items:center;

justify-content:center;

}

.containerspan{

position:absolute;

width:1em;

height:1em;

background-color:yellow;

}

增加讓小方塊左右移動(dòng)的動(dòng)畫效果，動(dòng)畫時(shí)長(zhǎng)還會(huì)在后面用到，所以定義成變量：

.containerspan{

--duration:2s;

animation:movevar(--duration)infinite;

}

@keyframesmove{

0%,100%{

left:calc(10%-0.5em);

}

50%{

left:calc(90%-0.5em);

}

}

用貝賽爾曲線調(diào)整動(dòng)畫的時(shí)間函數(shù)，使小方塊看起來就像在左右兩側(cè)跳來跳去：

.containerspan{

animation:movevar(--duration)cubic-bezier(0.6,-0.3,0.7,0)infinite;

}

增加小方塊變形的動(dòng)畫，使它看起來有下蹲起跳的擬人效果：

.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個(gè)方塊的動(dòng)畫。接下來設(shè)置多個(gè)方塊的動(dòng)畫效果。

為子元素定義CSS下標(biāo)變量：

.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;}

旋轉(zhuǎn)子元素，使小方塊分布均勻地在容器的四周，圍合成一個(gè)圓形：

.containerp{

transform:rotate(calc(var(--n)*40deg));

}

設(shè)置動(dòng)畫延時(shí)，現(xiàn)在看起來就像是一群小方塊貼著一個(gè)圓的內(nèi)邊線在旋轉(zhuǎn)了（但實(shí)際上沒有任何元素在做旋轉(zhuǎn)運(yùn)動(dòng)，大腦感覺到的旋轉(zhuǎn)是一種錯(cuò)覺）：

.containerspan{

animation-delay:calc(var(--duration)/9*var(--n)*-1);

}

最后，為小方塊上色：

.containerspan{

background-color:hsl(calc(var(--n)*80deg),100%,70%);

}

讀到這里，這篇“怎么用純CSS實(shí)現(xiàn)一個(gè)圓環(huán)旋轉(zhuǎn)錯(cuò)覺的動(dòng)畫效果”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：怎么用純CSS實(shí)現(xiàn)一個(gè)圓環(huán)旋轉(zhuǎn)錯(cuò)覺的動(dòng)畫效果
當(dāng)前鏈接：http://www.rwnh.cn/article2/jgppoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站、網(wǎng)站內(nèi)鏈、ChatGPT、企業(yè)網(wǎng)站制作、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)