使用纯css实现波浪效果

有时候我们需要实现水晃动的效果,其实我们可以通过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>
posted @ 2017-09-29 14:19  5Clay  阅读(...)  评论(...编辑  收藏