使用纯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  阅读(800)  评论(0)  编辑  收藏  举报