如何使用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实现海浪动效”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


当前名称:如何使用css实现海浪动效
分享链接:http://myzitong.com/article/jciepg.html