這篇文章主要介紹了純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中文網其他相關文章！
