如何使用css实现海浪动效

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

　　代码

　　html

　　<div class="wave"></div>

　　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实现海浪动效”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网html频道，更多相关知识等着你来学习!