卡卡网

本文介绍一款CSS实现的水波背景动画，在此之前，我也曾介绍过用CSS+SVG来实现的水波动画效果，有兴趣的朋友可以参阅一下下文。

• 纯CSS Wave波浪效果，扁平产品介绍网页常用

而今天要介绍的水波背景动画，是纯HTML+CSS实现，代码更加精炼。

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代码结构，外层容器是一个section标签，内部是4个div标签。4个div的class属性有一个公共值是air，此外，4个div的class属性还各自包含一个值，分别为：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 定义一个背景图片。

.air1 - .air4 使用CSS的animation属性，实现背景线性运动的动画。animation-delay 是定义动画延迟时间。

使用@keyframes规则创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个CSS样式。

background-position-x 定义背景图片的x轴位置。0% - 100% 百分比是设置动画改变发生的时间，0% 是动画的开始时间，100% 是动画的结束时间。

总结

本文介绍了纯CSS实现的水波背景动画，代码量非常少，并且简单易懂。如果你也喜欢这个效果，那么可以收藏本页，或者下载源码备用。

相关文章

• 纯CSS Wave波浪效果，扁平产品介绍网页常用

标签: css-wave  css3  动画背景