海的波浪
Posted snidget888
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了海的波浪相关的知识，希望对你有一定的参考价值。
html中 (
<div class="wave">
</div>
)
css（
.wave{
width: 200px;
height: 200px;
background-color: skyblue;
margin: 0 auto;
position: relative;
overflow: hidden;
}
/* // 两个不规则圆形（相对盒子进行定位，距离底部距离则为波浪高度） */
.wave::before,.wave::after{
content: "";
position: absolute;
left: 50%;
bottom: 15%;
width: 500%;
height: 500%;
border-radius: 45%;
background-color: #fff;
transform: translateX(-50%);
animation:rotate 10s linear infinite;
}
/*
// 其中一个不规则圆形调整一下样式，以便区分（或者调整animation的参数来区分） */
.wave::before{
bottom: 8%;
opacity: 0.6;
border-radius: 50%;
}
/* // 旋转动画 */
@keyframes rotate{
from{
transform: translateX(-50%) rotateZ(0deg);
}
to{
transform: translateX(-50%) rotateZ(360deg);
}
}
）
以上是关于海的波浪的主要内容，如果未能解决你的问题，请参考以下文章