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界面部分：

<div class="container">
			<div class="wave wave1"></div>
			<div class="wave wave2"></div>
			<div class="wave wave3"></div>
		</div>

原始图片：