本文小編為大家詳細(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://m.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)