首頁  >  文章  >  web前端  >  利用css3製作煽動翅膀的蝴蝶的程式碼

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

不言
不言原創
2018-06-20 15:19:534150瀏覽

這篇文章主要介紹了純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 規則,我們能夠創建動畫

  1. 創建動畫的原理是,將一套CSS 樣式逐漸變化為另一套樣式
  2. #以百分比來規定改變發生的時間,或者透過關鍵字"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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn