純CSS3打造逼真的多層雲彩動畫特效

　　簡要教程

　　這是一款效果非常炫酷的純CSS3逼真的多層雲彩動畫特效。該特效使用多張透明的雲彩PNG圖片作為背景圖片，使用CSS animation動畫來製作雲彩水平飄動的動畫效果。

查看源碼 下載外掛程式

　　使用方法

　　HTML結構

　　該多層雲彩動畫效果的HTML結構非常簡單：使用一個p.sky作為天饋的背景層，在它的裡面放置多個子<p>作為雲彩容器。

<p class="sky">    <p class="clouds_one"></p>    <p class="clouds_two"></p>    <p class="clouds_three"></p></p>

　　CSS樣式

　　作為天空背景的.sky元素設定一個固定的高度，採用相對定位，並使用 overflow: hidden;來隱藏超出範圍的元素。開始時天空的顏色設定為一個較淺的藍色#007fd5。然後為天空背景設定了一個sky_background的CSS3 animation動畫，該動畫在50秒的時間內，將天空背景的顏色由淺藍色過渡到深藍色，動畫的animation-timing-function為ease-out，動畫的迭代次數animation-iteration-count為無限迴圈。

　　在該特效中，每一個元素都被設定了transform: translate3d(0, 0, 0)屬性，該屬性用於開啟GPU的3D效果，提高顯示的效能。

.sky {    height: 480px;    background: #007fd5;    position: relative;    overflow: hidden;    -webkit-animation: sky_background 50s ease-out infinite;    -moz-animation: sky_background 50s ease-out infinite;    -o-animation: sky_background 50s ease-out infinite;    animation: sky_background 50s ease-out infinite;    -webkit-transform: translate3d(0, 0, 0);    -ms-transform: translate3d(0, 0, 0);    -o-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);  }  @keyframes sky_background {    0% {      background: #007fd5;      color: #007fd5    }    50% {      background: #000;      color: #a3d9ff    }    100% {      background: #007fd5;      color: #007fd5    }  }

　　雲層1使用第一幅雲彩PNG圖片作為背景圖片，使用絕對位置，相對於天空容器靠左對齊。高度和天空相等，寬度為天空容器的3倍。並執行cloud_one CSS3動畫。該動畫修改雲彩層的left屬性，使雲彩水平移動。

.clouds_one {    background: url("img/cloud_one.png");    position: absolute;    left: 0;    top: 0;    height: 100%;    width: 300%;    -webkit-animation: cloud_one 50s linear infinite;    -moz-animation: cloud_one 50s linear infinite;    -o-animation: cloud_one 50s linear infinite;    animation: cloud_one 50s linear infinite;    -webkit-transform: translate3d(0, 0, 0);    -ms-transform: translate3d(0, 0, 0);    -o-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);  }  @keyframes cloud_one {    0% {      left: 0    }    100% {      left: -200%    }  }

　　雲彩2和雲彩3的CSS3動畫基本類似雲彩1，只是動畫的期間animation-duration不相同，雲彩1的期間 為50秒，雲彩2的期間為75秒，雲彩3的期間為100秒。這樣各個雲層的動畫時間各不相同，會得到一些背景視覺差的效果。