使用纯css实现波浪效果

最新推荐文章于 2024-04-19 14:20:04 发布

weixin_30381793

最新推荐文章于 2024-04-19 14:20:04 发布

阅读量282

点赞数

原文链接：http://www.cnblogs.com/5-clay/p/7610528.html

版权

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

转载于:https://www.cnblogs.com/5-clay/p/7610528.html

weixin_30381793

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用纯css实现波浪效果

有时候我们需要实现水晃动的效果，其实我们可以通过css旋转动画和圆角来实现。首先来2个div,外层div相对定位，内层div绝对定位，内层div大致位于外层div上半部分。外层div设置一个颜色较深的背景色（水的颜色）;内层div颜色设置为白色，加上圆角，圆角建议30%-45%之间，然后加上无限循环的旋转动画，通过内层div的旋转来实现波浪效果。参考代码如下：<style>...
复制链接

扫一扫