给我一朵浪花，还你一片波涛

css3的animation是个常用的属性，以下我简单地实现了一个大海的波浪效果，这次简单的实现用到了一个小小的波浪图片素材，下次再实现纯代码版本。

spindrift.png

//html部分只需要一个标签
<div class="sea"></div>

重点是css部分

html,body{
  width:100%;
  height:100%;
}
.sea{
  height:100%;
  width:100%;
  background:url('https://upload-images.jianshu.io/upload_images/2280442-df376d3a7602168c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/620') repeat-x;
  background-color:#6EEFFF;
  animation:mymove 2s linear infinite; 
}
.sea:before{
  content:'';
  width:100%;
  height:207px;
  position:absolute;
  left:0;
  top:20px;
  background:url('https://upload-images.jianshu.io/upload_images/2280442-df376d3a7602168c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/620');
  animation:mymove1 4s linear infinite;
  opacity:0.6;
}
.sea:after{
  content:'';
  width:100%;
  height:207px;
  position:absolute;
  left:0;
  top:40px;
  opacity:0.7;
  background:url('https://upload-images.jianshu.io/upload_images/2280442-df376d3a7602168c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/620');
  animation:mymove1 3s linear infinite;
}
@keyframes mymove{
  0%{
    background-position:0 100px;
  }
  100%{
    background-position:-620px 100px;
  }
}
@-webkit-keyframes mymove{
  0%{
    background-position:0 100px;
  }
  100%{
    background-position:-620px 100px;
  }
}
@keyframes mymove1{
  0%{
    background-position:0 0;
  }
  100%{
    background-position:-620px 0;
  }
}
@-webkit-keyframes mymove1{
  0%{
    background-position:0 0;
  }
  100%{
    background-position:-620px 0;
  }
}

效果预览：https://jsfiddle.net/xiaowoniu/qkg3o1f2/64/

关键词：伪元素before，after，css3 animation
spindrift.png