首頁 > web前端 > css教學 > 主體

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

巴扎黑
發布: 2017-05-27 17:37:57
原創
2404 人瀏覽過

  簡要教學

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

 

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

#檢視原始碼##檢視原始碼

下載外掛程式

  使用方法

#  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%
    }
  }
登入後複製

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

以上是純CSS3打造逼真的多層雲彩動畫特效的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板