這篇文章主要介紹了如何使用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實現海浪動效”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
