簡單的圖標擴散動畫，重點備註動畫
效果爲一個心臟跳動spa
Body：ci
<div id="img_head_back">animation
<img src="img/郵箱(1).png" class="img_head_back_1" >it
</div>io
Css：class
.img_head_back_1{im
margin: auto; margin
position: absolute; top
top: 0;
left: 0;
bottom: 0;
right: 0;
animation-name: back;/* 爲動畫設置名稱 */
animation-duration: 3s;/* 動畫時長 */
animation-delay: 0s;/* 動畫等待1s後開始 */
animation-iteration-count: infinite;/* 動畫無限重複 */
}
//間隔1.5秒一次動畫效果
@keyframes back{
0% {
width:180px;
height: 180px;
opacity:1.0;
}
50%{
width:180px;
height: 180px;
opacity:1.0;
}
100%{
width:220px;
height:220px;
opacity:0;
}
}