波及効果を達成するためのCSS
EDITORIAL：非専門家のフロントエンド、趣味、コードスタイルはまた、あなたが私を許して傷を願っています
私たちは、上の多くの直接的な効果は話をしませんでした
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>
しかし、この時間は、ページ上の任意の効果が表示されません
- 背景色の効果の追加の印として本部シンプル
.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）
