CSS3制作波浪的动画效果

一、效果展示

首先展���一下制作的效果，这里以图片代替。

二、原始代码

主要是通过css3的动画效果，以及html的定位布局共同实现的。

实现代码如下：

css部分，样式布局及动画设计：

.container{overflow: hidden;height: 300px;background: #28286f;position: relative;}.wave{position: absolute;    left: 0;    bottom: 0px;    width: 200%;    height: 150px;    background-repeat: repeat-x;    background-position: left bottom;    transform-origin: center bottom;    background-size: 50% 140px;}.wave1{z-index: 5;opacity: 1;animation: swave 20s linear infinite;background-image:url(img/曲线.png);}.wave2{z-index:4;opacity: .3;animation: swave 30s linear infinite;background-image:url(img/曲线.png);}.wave3{z-index:3;opacity: .5;animation: swave 45s linear infinite;background-image:url(img/曲线.png);}@keyframes swave{  0%{transform:translateX(0)  scaleY(1)}  50%{transform:translateX(-25%) scaleY(.55)}  100%{transform:translateX(-50%) scaleY(1)}  }

html界面部分：

原始图片：