簡要教學
這是一款效果非常酷的純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中文網其他相關文章!