CSS動畫實例: 仍扔炸彈式效果
來自： http://www.wutongwei.com/front/infor_showone.tweb?id=199
扔炸彈式效果,在游戲中會用得多,H5頁面效果里面也有相應的效果應用.這種效果也是非常有感覺的.
我們先把布局弄好,效果如下:
代碼也是很簡單的:
HTML
<div class="outer_box"> <div class="inner_box"></div> </div>
.outer_box {
width: 200px;
height: 200px;
border: #bbb 5px solid;
margin: 200px auto;
}
.inner_box {
background-color: #44b549;
width: 100%;
height: 100%;
}
結構代碼寫好后,我們來分析扔炸彈的效果:
首先炸彈是在某一個點扔出,這里我們設為原始狀態的點.
其次就是將炸彈以弧形方式在空中做弧形運動
最后在一個點消失.
這三步驟就實現扔炸彈的簡單效果.OK,我們直接用代碼來給你解釋:
CSS
@keyframes bomb_right {
0% {
tramsform: rotate(0deg);
}
50% {
opacity: 0.8;
}
100% {
transform: rotate(130deg);
opacity: 0;
}
}
然后將下面動畫屬性加入到內部BOX的CSS屬性中
CSS
animation: bomb_right 1s ease-out infinite;
transform-origin: 200% 100%;
最后效果:
實例完成. 你也可以嘗試寫出向左扔出炸彈的效果.
本文屬于吳統威的博客, 微信公眾號:bianchengderen,QQ群:186659233 的原創文章,轉載時請注明出處及相應鏈接:http://www.wutongwei.com/front/infor_showone.tweb?id=199 ,歡迎大家傳播與分享.
</div> 本文由用戶 JoannNoland 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！