CSS實現波紋效果
寫在前面：非專業前端，個人愛好，代碼風格傷了你還望見諒
話不多說直接上效果
HTML的骨架代碼
初步靜態代碼展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水波效果</title>
</head>
<body>
<div class="wave_wrapper">
<span class="wave_scale">
</span>
<span class="wave_scale delay">
</span>
</div>
</body>
</html>
但是這個時候在頁面上看不到任何效果
- 爲div追加簡單的標誌性效果背景顏色
.wave_wrapper {
margin: 20% auto;
width: 800px;
height: 800px;
background-color: rgb(248, 41, 171);
}
美化現有的波紋中心
- 旋轉中心div 圓角效果
.wave_wrapper {
margin: 20% auto;
width: 800px;
height: 800px;
background-color: rgb(248, 41, 171);
transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0);
border-radius: 20%;
}
中心點擴散塊
span {
position: absolute;
width: 50%;
height: 50%;
top: 25%;
left: 25%;
border: 0.2rem solid rgba(248, 41, 171, 0.28);
border-radius: 50%;
z-index: -1;
}
爲中心點添加擴散效果
span.wave_scale {
animation: wave_scale 3s linear infinite;
-webkit-animation: wave_scale 3s linear infinite;
}
@keyframes wave_scale {
from {
transform: translate3d(-41px, -41px, 0px) scale(1, 1);
-webkit-transform: scale(1, 1);
opacity: 1;
}
to {
transform: translate3d(-41px, -41px, 0px) scale(10, 10);
-webkit-transform: scale(5, 5);
opacity: 0;
}
}
@-webkit-keyframes wave_scale {
from {
transform: translate3d(-41px, -41px, 0px) scale(1, 1);
-webkit-transform: scale(1, 1);
opacity: 1;
}
to {
transform: translate3d(-41px, -41px, 0px) scale(10, 10);
-webkit-transform: scale(5, 5);
opacity: 0;
}
}
效果修飾
- 爲了看起來更加美觀這邊將第二部分的水波延遲加載一部分
span.wave_scale.delay {
animation: wave_scale 3s linear infinite 0.3s;
-webkit-animation: wave_scale 3s linear infinite 0.3s;
}
最終效果：
源代碼獲取（WX代號WAVE_001）
