簡要教學
這是一款效果非常酷的純CSS3逼真的多層雲彩動畫特效。此特效使用多張透明的雲彩PNG圖片作為背景圖片，使用CSS animation動畫來製作雲彩水平飄動的動畫效果。
#檢視原始碼##檢視原始碼
下載外掛程式
使用方法
# HTML結構
此多層雲彩動畫效果的HTML結構非常簡單：使用一個p.sky作為天饋的背景層，在它的里面放置多個子
作為雲彩容器。
<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%
}
}以上是純CSS3打造逼真的多層雲彩動畫特效的詳細內容。更多資訊請關注PHP中文網其他相關文章！
