效果圖
家好,本篇文章分享經(jīng)典Loading加載縮放動(dòng)畫(huà)特效,歡迎參考和指正。
效果圖:
Loading加載縮放動(dòng)畫(huà)特效
HTML代碼:
<div class="tui-demo-5"> <div class="tui-1"></div> <div class="tui-2"></div> <div class="tui-3"></div> </div>
CSS代碼:
<style type="text/css"> .tui-demo-5 { width: 100px; height: 100px; margin: 50px auto; display: flex; flex-wrap: wrap; justify-content: space-between; } .tui-demo-5 div { width: 25px; height: 25px; border-radius: 50%; background: #2eefe6; animation: tui-demo-5 0.4s infinite alternate; } .tui-demo-5 .tui-1 { animation-delay: -0.4s; } .tui-demo-5 .tui-2 { animation-delay: -0.2s; } .tui-demo-5 .tui-3 { animation-delay: 0s; } @keyframes tui-demo-5 { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0.4; transform: scale(0.6); } } </style>
知識(shí)點(diǎn):
animation:是CSS3的動(dòng)畫(huà)屬性,這里把a(bǔ)nimation綁定到tui-demo-5元素上,并指定該動(dòng)畫(huà)需要0.4秒完成,infinite則表示無(wú)限次播放該動(dòng)畫(huà),alternate則表示動(dòng)畫(huà)會(huì)在奇數(shù)次數(shù)正常播放,而在偶數(shù)次數(shù)向后播放,animation-delay則表示動(dòng)畫(huà)在啟動(dòng)前的延遲間隔。
@keyframes:該規(guī)則表示動(dòng)畫(huà)可以逐步從一個(gè)CSS樣式改變?yōu)榱硪粋€(gè)CSS樣式。這里0%是動(dòng)畫(huà)開(kāi)頭,100%是動(dòng)畫(huà)結(jié)束。
transform:該屬性應(yīng)用于2D元素或3D元素的轉(zhuǎn)換,允許元素發(fā)生旋轉(zhuǎn),縮放,移動(dòng),傾斜等效果。scale定義2D縮放,可以配置縮放大小。opacity定義元素的不透明級(jí)別。
最后注意下瀏覽器兼容問(wèn)題,-webkit-,-ms-或-moz-,有問(wèn)題可以留言,大家一起學(xué)習(xí)HTML+CSS基礎(chǔ)入門(mén)開(kāi)發(fā)。
avascript使用document.getElementById操作div
javascript中經(jīng)常會(huì)操作div,大家在網(wǎng)上看到的各種酷炫的前端效果,很多都是通過(guò)操作div來(lái)實(shí)現(xiàn)的,下面通過(guò)實(shí)例代碼和注釋來(lái)講解:
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。