建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹了怎么用純CSS3打造逼真的多層云彩動畫特效的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇怎么用純CSS3打造逼真的多層云彩動畫特效文章都會有所收獲，下面我們一起來看看吧。
十余年的雙陽網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。營銷型網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整雙陽建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“雙陽網(wǎng)站設(shè)計”,“雙陽網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。
CSS樣式
作為天空背景的.sky元素設(shè)置一個固定的高度，采用相對定位，并使用overflow: hidden;來隱藏超出范圍的元素。開始時天空的顏色設(shè)置為一個較淺的藍色#007fd5。然后為天空背景設(shè)置了一個sky_background的CSS3 animation動畫，該動畫在50秒的時間內(nèi)，將天空背景的顏色由淺藍色過渡到深藍色，動畫的animation-timing-function為ease-out，動畫的迭代次數(shù)animation-iteration-count為無限循環(huán)。
在該特效中，每一個元素都被設(shè)置了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倍。并執(zhí)行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，只是動畫的持續(xù)時間animation-duration不相同，云彩1的持續(xù)時間 為50秒，云彩2的持續(xù)時間為75秒，云彩3的持續(xù)時間為100秒。這樣各個云層的動畫時間各不相同，會得到一些背景視覺差的效果。
關(guān)于“怎么用純CSS3打造逼真的多層云彩動畫特效”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“怎么用純CSS3打造逼真的多層云彩動畫特效”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享題目：怎么用純CSS3打造逼真的多層云彩動畫特效
文章鏈接：http://www.ef60e0e.cn/article/gdcddd.html
