整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
效果圖
家好，本篇文章分享經典Loading加載縮放動畫特效，歡迎參考和指正。
效果圖：
Loading加載縮放動畫特效
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>
知識點：
animation：是CSS3的動畫屬性，這里把animation綁定到tui-demo-5元素上，并指定該動畫需要0.4秒完成，infinite則表示無限次播放該動畫，alternate則表示動畫會在奇數次數正常播放，而在偶數次數向后播放，animation-delay則表示動畫在啟動前的延遲間隔。
@keyframes：該規則表示動畫可以逐步從一個CSS樣式改變為另一個CSS樣式。這里0％是動畫開頭，100％是動畫結束。
transform：該屬性應用于2D元素或3D元素的轉換，允許元素發生旋轉，縮放，移動，傾斜等效果。scale定義2D縮放，可以配置縮放大小。opacity定義元素的不透明級別。
最后注意下瀏覽器兼容問題，-webkit-,-ms-或-moz-，有問題可以留言，大家一起學習HTML+CSS基礎入門開發。
avascript使用document.getElementById操作div
javascript中經常會操作div，大家在網上看到的各種酷炫的前端效果，很多都是通過操作div來實現的，下面通過實例代碼和注釋來講解：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
