如何使用css实现海浪动效

这篇文章主要介绍了如何使用css实现海浪动效，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

成都创新互联公司-专业网站定制、快速模板网站建设、高性价比双峰网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式双峰网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖双峰地区。费用合理售后完善，十载实体公司更值得信赖。

代码

html

scss

// 简单的盒子

.wave {

position: relative;

width: 150px;

height: 150px;

background-color: #5291e0;

overflow: hidden;

// 两个不规则圆形（相对盒子进行定位，距离底部距离则为波浪高度）

&::before,

&::after {

content: "";

position: absolute;

left: 50%;

bottom: 15%;

width: 500%;

height: 500%;

border-radius: 45%;

background-color: #fff;

transform: translateX(-50%); // 居中

animation: rotate 15s linear infinite;

}

// 其中一个不规则圆形调整一下样式，以便区分（或者调整animation的参数来区分）

&::before {

bottom: 10%;

opacity: .5;

border-radius: 47%;

}

}

}

// 旋转动画

@keyframes rotate {

from {

transform: translateX(-50%) rotateZ(0deg);

}

to {

transform: translateX(-50%) rotateZ(360deg);

}

}

感谢你能够认真阅读完这篇文章，希望小编分享的“如何使用css实现海浪动效”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!