這篇文章將為大家詳細(xì)講解有關(guān)怎么用CSS實(shí)現(xiàn)眼冒金星的動(dòng)畫效果，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)長(zhǎng)期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為長(zhǎng)垣企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)、做網(wǎng)站，長(zhǎng)垣網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
代碼解讀
定義dom，容器中包含9個(gè)子元素：
居中顯示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:black;
}
設(shè)置容器中子元素的布局方式，形成一個(gè)3*3的網(wǎng)格，其中--columns是網(wǎng)格每一邊上的子元素?cái)?shù)量：
.container{
display:grid;
--columns:3;
grid-template-columns:repeat(var(--columns),1fr);
}
定義子元素樣式：
.containerspan{
width:25px;
height:25px;
color:lime;
background-color:currentColor;
}
增加子元素的動(dòng)畫效果，總動(dòng)畫時(shí)長(zhǎng)是5秒，其中第1秒（0%~20%）有動(dòng)畫，其余4秒（20%~100%）靜止：
.containerspan{
transform:scale(0);
animation:spin5slinearinfinite;
}
@keyframesspin{
0%{
transform:rotate(0deg)scale(1);
}
5%,15%{
transform:rotate(90deg)scale(0);
background:white;
}
17.5%{
transform:rotate(180deg)scale(1);
background-color:currentColor;
}
20%,100%{
transform:rotate(90deg)scale(0);
}
}
設(shè)置動(dòng)畫延時(shí)，使各子元素的動(dòng)畫隨機(jī)延時(shí)4秒之內(nèi)的任意時(shí)間：
.containerspan{
animation-delay:calc(var(--delay)*1s);
}
.containerspan:nth-child(1){--delay:0.8}
.containerspan:nth-child(2){--delay:0.2}
.containerspan:nth-child(3){--delay:1.9}
.containerspan:nth-child(4){--delay:3.9}
.containerspan:nth-child(5){--delay:2.8}
.containerspan:nth-child(6){--delay:3.5}
.containerspan:nth-child(7){--delay:1.5}
.containerspan:nth-child(8){--delay:2.3}
.containerspan:nth-child(9){--delay:1.7}
至此，靜態(tài)效果完成，接下來批量處理dom元素。
引入d3庫(kù)：
刪除掉css文件中的--columns變量聲明，用d3為變量賦值：
constCOLUMNS=3;
d3.select('.container')
.style('--columns',COLUMNS);
刪除掉html文件中的子元素，用d3動(dòng)態(tài)生成：
d3.select('.container')
.style('--columns',COLUMNS)
.selectAll('span')
.data(d3.range(COLUMNS*COLUMNS))
.enter()
.append('span');
刪除掉css文件中的--delay變量聲明，用d3為變量生成隨機(jī)數(shù)：
d3.select('.container')
.style('--columns',COLUMNS)
.selectAll('span')
.data(d3.range(COLUMNS*COLUMNS))
.enter()
.append('span')
.style('--delay',()=>Math.random()*4);
最后，把邊長(zhǎng)改為15，生成更多的子元素，加強(qiáng)視覺效果：
constCOLUMNS=15;
關(guān)于“怎么用CSS實(shí)現(xiàn)眼冒金星的動(dòng)畫效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
重慶分公司
重慶分公司
