利用css3製作煽動翅膀的蝴蝶的程式碼

這篇文章主要介紹了純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

1. #透過@keyframes 規則，我們能夠創建動畫

創建動畫的原理是，將一套CSS 樣式逐漸變化為另一套樣式
#以百分比來規定改變發生的時間，或者透過關鍵字"from" 和"to" ，等價於0% 和100%。

0% 是動畫的開始時間，100% 動畫的結束時間

transform: rotateY()

#transform 屬性向元素套用2D 或3D 轉換。此屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

rotateY()定義沿著 Y 軸的 3D 旋轉。

這張圖很直觀的說明了xyz軸，其實學過3DS MAX這類3d建模軟體的同學應該更為熟悉這個3軸的指向。 實現想法：先用子絕父相將左翅膀，右翅膀，和身體進行絕對定位，拼合在一起，然後利用transform的rotateY使其沿y軸旋轉，旋轉這裡使用@keyframe動畫，然後重複動作。

也要專注於下transform-style: preserve-3d;這個屬性，w3c 的說明是 使被轉換的子元素保留其 3D 轉換。也就是所有子元素在3D空間中呈現，相反設定為flat的話，則所有子元素在2D空間中呈現

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：#########使用用css3實現氣球樣式的效果###############利用CSS3實作仿微信聊天小氣泡# ##############使用HTML和CSS3模擬心跳的實作方法#####################

以上是利用css3製作煽動翅膀的蝴蝶的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！