有时候我们需要实现水晃动的效果，其实我们可以通过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>
发表评论：