這篇文章主要介紹了純css3製作煽動翅膀的蝴蝶的範例的相關資料,內容挺不錯的,現在分享給大家,也給大家做個參考。
純css3製作煽動翅膀的蝴蝶,先看效果
#怎麼樣,效果還不錯吧
上程式碼:
html
<p id="butterfly"> <p class="leftSide"></p> <p class="body"></p> <p class="rightSide"></p> </p>
css
#body{ background: url("./images/bg.jpg") no-repeat; } #butterfly{ width: 600px; height: 500px; position: relative; transform: scale(0.35); transform-style: preserve-3d; } .leftSide{ width: 267px; height: 421px; background: url("./images/leftSide.png") no-repeat; position: absolute; left: 26px; top: 40px; animation: left 2s infinite; z-index: 9999; } @keyframes left { 0%{ transform: rotateY(0deg); transform-origin: right center; perspective: 201px; } 50%{ transform: rotateY(70deg); transform-origin: right center; perspective: 201px; } 100%{ transform: rotateY(0deg); transform-origin: right center; perspective: 201px; } } @keyframes right { 0%{ transform: rotateY(0); transform-origin: left center; perspective: 201px; } 50%{ transform: rotateY(-70deg); transform-origin: left center; perspective: 201px; } 100%{ transform: rotateY(0); transform-origin: left center; perspective: 201px; } } .body{ width: 152px; height: 328px; background: url("./images/body.png") no-repeat; position: absolute; margin: auto; left: 0; right: 0; bottom: 0; top: 0; z-index: 9999; } .rightSide{ width: 284px; height: 460px; background: url("./images/rightSide.png") no-repeat; position: absolute; right: 26px; top: 58px; animation: right 2s infinite; z-index: 9999; }
在這之前介紹幾個css屬性;
@keyframes
#透過@keyframes 規則,我們能夠創建動畫
transform: rotateY()
#transform 屬性向元素套用2D 或3D 轉換。此屬性允許我們對元素進行旋轉、縮放、移動或傾斜。這張圖很直觀的說明了xyz軸,其實學過3DS MAX這類3d建模軟體的同學應該更為熟悉這個3軸的指向。 實現想法:先用子絕父相將左翅膀,右翅膀,和身體進行絕對定位,拼合在一起,然後利用transform的rotateY使其沿y軸旋轉,旋轉這裡使用@keyframe動畫,然後重複動作。
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:#########使用用css3實現氣球樣式的效果###############利用CSS3實作仿微信聊天小氣泡# ##############使用HTML和CSS3模擬心跳的實作方法#####################以上是利用css3製作煽動翅膀的蝴蝶的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!