您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關怎么用CSS實現眼冒金星的動畫效果,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
代碼解讀
定義dom,容器中包含9個子元素:
<divclass='container'>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
居中顯示:
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:black;
}
設置容器中子元素的布局方式,形成一個3*3的網格,其中--columns是網格每一邊上的子元素數量:
.container{
display:grid;
--columns:3;
grid-template-columns:repeat(var(--columns),1fr);
}
定義子元素樣式:
.containerspan{
width:25px;
height:25px;
color:lime;
background-color:currentColor;
}
增加子元素的動畫效果,總動畫時長是5秒,其中第1秒(0%~20%)有動畫,其余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);
}
}
設置動畫延時,使各子元素的動畫隨機延時4秒之內的任意時間:
.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}
至此,靜態效果完成,接下來批量處理dom元素。
引入d3庫:
<scriptsrc="https://d3js.org/d3.v5.min.js"></script>
刪除掉css文件中的--columns變量聲明,用d3為變量賦值:
constCOLUMNS=3;
d3.select('.container')
.style('--columns',COLUMNS);
刪除掉html文件中的<span>子元素,用d3動態生成:
d3.select('.container')
.style('--columns',COLUMNS)
.selectAll('span')
.data(d3.range(COLUMNS*COLUMNS))
.enter()
.append('span');
刪除掉css文件中的--delay變量聲明,用d3為變量生成隨機數:
d3.select('.container')
.style('--columns',COLUMNS)
.selectAll('span')
.data(d3.range(COLUMNS*COLUMNS))
.enter()
.append('span')
.style('--delay',()=>Math.random()*4);
最后,把邊長改為15,生成更多的子元素,加強視覺效果:
constCOLUMNS=15;
關于“怎么用CSS實現眼冒金星的動畫效果”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。