家好，本篇文章分享經(jīng)典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)講解：