如何使用css實(shí)現(xiàn)海浪動(dòng)效

這篇文章主要介紹了如何使用css實(shí)現(xiàn)海浪動(dòng)效，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　代碼

　　html

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

　　scss

　　// 簡(jiǎn)單的盒子

　　.wave {

　　position: relative;

　　width: 150px;

　　height: 150px;

　　background-color: #5291e0;

　　overflow: hidden;

　　// 兩個(gè)不規(guī)則圓形（相對(duì)盒子進(jìn)行定位，距離底部距離則為波浪高度）

　　&::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;

　　}

　　// 其中一個(gè)不規(guī)則圓形調(diào)整一下樣式，以便區(qū)分（或者調(diào)整animation的參數(shù)來(lái)區(qū)分）

　　&::before {

　　bottom: 10%;

　　opacity: .5;

　　border-radius: 47%;

　　}

　　}

　　}

　　// 旋轉(zhuǎn)動(dòng)畫

　　@keyframes rotate {

　　from {

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

　　}

　　to {

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

　　}

　　}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用css實(shí)現(xiàn)海浪動(dòng)效”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!