怎么用純CSS3打造逼真的多層云彩動畫特效

這篇文章主要介紹了怎么用純CSS3打造逼真的多層云彩動畫特效的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇怎么用純CSS3打造逼真的多層云彩動畫特效文章都會有所收獲，下面我們一起來看看吧。

　　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秒。這樣各個云層的動畫時間各不相同，會得到一些背景視覺差的效果。

關于“怎么用純CSS3打造逼真的多層云彩動畫特效”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“怎么用純CSS3打造逼真的多層云彩動畫特效”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。