卡卡網(wǎng)

本文介紹一款CSS實(shí)現(xiàn)的水波背景動(dòng)畫，在此之前，我也曾介紹過用CSS+SVG來實(shí)現(xiàn)的水波動(dòng)畫效果，有興趣的朋友可以參閱一下下文。

• 純CSS Wave波浪效果，扁平產(chǎn)品介紹網(wǎng)頁常用

而今天要介紹的水波背景動(dòng)畫，是純HTML+CSS實(shí)現(xiàn)，代碼更加精煉。

demodownload

HTML代碼

<section>
  <div class='air air1'></div>
  <div class='air air2'></div>
  <div class='air air3'></div>
  <div class='air air4'></div>
</section>

HTML代碼結(jié)構(gòu)，外層容器是一個(gè)section標(biāo)簽，內(nèi)部是4個(gè)div標(biāo)簽。4個(gè)div的class屬性有一個(gè)公共值是air，此外，4個(gè)div的class屬性還各自包含一個(gè)值，分別為：air1、air2、air3、air4。

CSS代碼

*{
  margin: 0;
  padding: 0;
}
section{
  position: relative;
  width: 100%;
  height: 100vh;
  background: #3586ff;
  overflow: hidden;
}
section .air{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url(wave.png);
  background-size: 1000px 100px
}
section .air.air1{
  animation: wave 30s linear infinite;
  z-index: 1000;
  opacity: 1;
  animation-delay: 0s;
  bottom: 0;
}
section .air.air2{
  animation: wave2 15s linear infinite;
  z-index: 999;
  opacity: 0.5;
  animation-delay: -5s;
  bottom: 10px;
}
section .air.air3{
  animation: wave 30s linear infinite;
  z-index: 998;
  opacity: 0.2;
  animation-delay: -2s;
  bottom: 15px;
}
section .air.air4{
  animation: wave2 5s linear infinite;
  z-index: 997;
  opacity: 0.7;
  animation-delay: -5s;
  bottom: 20px;
}
@keyframes wave{
  0%{
    background-position-x: 0px; 
  }
  100%{
    background-position-x: 1000px; 
  }
}
@keyframes wave2{
  0%{
    background-position-x: 0px; 
  }
  100%{
    background-position-x: -1000px; 
  }
}

代碼分析

section .air 定義一個(gè)背景圖片。

.air1 - .air4 使用CSS的animation屬性，實(shí)現(xiàn)背景線性運(yùn)動(dòng)的動(dòng)畫。animation-delay 是定義動(dòng)畫延遲時(shí)間。

使用@keyframes規(guī)則創(chuàng)建動(dòng)畫。創(chuàng)建動(dòng)畫是通過逐步改變從一個(gè)CSS樣式設(shè)定到另一個(gè)CSS樣式。

background-position-x 定義背景圖片的x軸位置。0% - 100% 百分比是設(shè)置動(dòng)畫改變發(fā)生的時(shí)間，0% 是動(dòng)畫的開始時(shí)間，100% 是動(dòng)畫的結(jié)束時(shí)間。

總結(jié)

本文介紹了純CSS實(shí)現(xiàn)的水波背景動(dòng)畫，代碼量非常少，并且簡(jiǎn)單易懂。如果你也喜歡這個(gè)效果，那么可以收藏本頁，或者下載源碼備用。

相關(guān)文章

• 純CSS Wave波浪效果，扁平產(chǎn)品介紹網(wǎng)頁常用

標(biāo)簽: css-wave  css3  動(dòng)畫背景