最初に効果を見てください：
序文：
このアイデアは、ステーションbのUPのマスターであるスティーブンによって作成されました。かなり良いと思い、自分で作成しました。（純粋なCSS）
成し遂げる：
- ラベルを定義します。3つのドロップボックスがあり、丸いボックスに番号が表示され、下部のボックスが表示されます。
<div class="kuang">
<div class="droplet"></div>
<div class="droplet"></div>
<div class="droplet"></div>
<div class="quan"></div>
<span>99%</span>
</div>
- 下のボックスに基本的なスタイルを与えます。3つの水滴が一時的に中央に垂直に配置されるようにフレックスレイアウト。
.kuang{
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(5,5,5);
filter: contrast(30);
}
filter：contrast（30）;画像のコントラストを調整します。値が0％の場合、画像は完全に黒くなります。値は100％で、画像は変化しません。値は100％を超える可能性があります。これは、より低いコントラストが使用されることを意味します。値が設定されていない場合、デフォルトは1です。
- 水滴の基本的なスタイル。3つのボックスが重なるように絶対配置。
.droplet{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61, 233, 99);
filter: blur(20px);
animation: fall 3s linear infinite;
opacity: 0;
}
filter：blur（20px）;画像にぼかしを設定します。
キーポイント：水滴ボックスにぼやけ度を付けますが、3つの水滴ボックスはぼやけた状態で表示されます。次に、画像のコントラストを下のボックスに設定して、ぼやけた画像が輪郭を再描画し、次の効果が得られるようにします。
- 数字を表示する円の基本的なスタイルを指定します。あいまいさも設定することを忘れないでください。このように、画像のコントラストの下で落下する水滴との融合効果があります。
.quan{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61, 233, 99);
filter: blur(20px);
animation: zhuan 3s infinite;
}
- 水滴をアニメーション化し、上から下に落下させます。その間にサイズが変化します。これらは自分でゆっくりと調整し、考えられる最高の効果に設定できます。
@keyframes fall{
0%{
opacity: 0;
transform: scale(0.8) translateY(-500%);
}
50%{
opacity: 1;
transform: scale(0.5) translateY(-100%) ;
}
100%{
transform: scale(0.3) translateY(0px);
}
}
- 2番目と3番目の液滴が少し遅れた後にアニメーションを再生して、3つの液滴が別々に落ちるようにします。数秒は、自分でゆっくりとデバッグして、思いどおりの効果に設定できます。
.kuang div:nth-of-type(2){
animation-delay: 1.5s;
}
.kuang div:nth-of-type(3){
animation-delay: 2s;
}
- 数字が表示されている円をアニメーション化し、回転させます。この間、サイズや角度の変更などを行うことができ、特定の値を自分でゆっくりと調整して、思い通りの効果を出すことができます。
@keyframes zhuan{
0%{
transform: scale(1) rotate(0deg);
}
50%{
transform: scale(1.1) rotate(180deg);
height: 90px;
border-top-left-radius: 45%;
border-bottom-left-radius: 48%;
}
100%{
transform:scale(1) rotate(360deg);
}
}
完全なコード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>北极光之夜。</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.kuang{
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(5,5,5);
filter: contrast(30);
}
.droplet{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61, 233, 99);
filter: blur(20px);
animation: fall 3s linear infinite;
opacity: 0;
}
.kuang div:nth-of-type(2){
animation-delay: 1.5s;
}
.kuang div:nth-of-type(3){
animation-delay: 2s;
}
@keyframes fall{
0%{
opacity: 0;
transform: scale(0.8) translateY(-500%);
}
50%{
opacity: 1;
transform: scale(0.5) translateY(-100%) ;
}
100%{
transform: scale(0.3) translateY(0px);
}
}
.quan{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61, 233, 99);
filter: blur(20px);
animation: zhuan 3s infinite;
}
@keyframes zhuan{
0%{
transform: scale(1) rotate(0deg);
}
50%{
transform: scale(1.1) rotate(180deg);
height: 90px;
border-top-left-radius: 45%;
border-bottom-left-radius: 48%;
}
100%{
transform:scale(1) rotate(360deg);
}
}
span{
position: absolute;
color: rgb(184, 182, 182);
font-size: 26px;
font-family: 'fangsong';
font-weight: bold;
}
</style>
</head>
<body>
<div class="kuang">
<div class="droplet"></div>
<div class="droplet"></div>
<div class="droplet"></div>
<div class="quan"></div>
<span>99%</span>
</div>
</body>
</html>
総括する：
その他の記事：
レスポンシブカードホバリング効果html + css
水波読み込みアニメーションhtml + css
ナビゲーションバースクロールグラデーション効果html + css + js
など...