有时候我们需要实现水晃动的效果，其实我们可以通过css旋转动画和圆角来实现。
首先来2个div,外层div相对定位，内层div绝对定位，内层div大致位于外层div上半部分。外层div设置一个颜色较深的背景色（水的颜色）;内层div颜色设置为白色，加上圆角，圆角建议30%-45%之间，然后加上无限循环的旋转动画，通过内层div的旋转来实现波浪效果。
参考代码如下：
<style>
???#container{
???????width:400px;
???????height:200px;
???????position: relative;
???????border:1px solid #ccc;
???????margin:300px auto;
???????overflow: hidden;
???????background:seagreen;
???}
???.wave{
???????background:#fff;
???????border-radius:32%;
???????width:500px;
???????height:500px;
???????position:absolute;
???????left:50%;
???????bottom:68px;
???????animation: go 8s infinite linear;
???}
???@keyframes go {
???????0% {
???????????transform: translate(-50%, 0) rotateZ(0deg);
???????}
???????50% {
???????????transform: translate(-50%, -2%) rotateZ(180deg);
???????}
???????100% {
???????????transform: translate(-50%, 0%) rotateZ(360deg);
???????}
???}
</style>
<body>
<div id="container">
???<div class="wave"></div>
</div>
</body>
使用纯css实现波浪效果
原文地址：http://www.cnblogs.com/5-clay/p/7610528.html