使用纯css实现波浪效果

2018-06-24 01:55:33来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:contenteditable元素的placeholder输入提示语设置

下一篇:8.html表格相关的标记9.html表格实战《简单的网页布局》