どうも!LSSです!!
に少し手を加え、水滴が水面に落ちてそこに波紋が広がる、というものにしてみました。
サンプルとコード、そして「LSSがコード改変した手順を長々と」書いています。
水滴落下、からの透過波紋
コード
<style>
@keyframes trwavea{
0%{background-size:20px 10px,100% 100%,100% 100%;}
95%,100%{background-size:20px 30px,2000% 2000%,100% 100%;}
0%{background-position:50% -100%,50% 50%,0 0;}
100%{background-position:50% 50%,50% 50%,0 0;}
}
.trwave{
height:210px;
background-image:
radial-gradient(farthest-side,#7777ee 60%,#7777ee00 100%),
radial-gradient(farthest-side,#8888ff 5%,#8888ff00 6%,#8888ff 7%,#8888ff00 8%,#8888ff 9%,#8888ff00 10%,#8888ff 11%,#8888ff00 12%,#8888ff 13%),
radial-gradient(farthest-side,#6666bb,#8888ff 100%);
background-repeat:no-repeat;
animation:trwavea 3s linear infinite;
}
</style>
<div class="trwave"> </div>
【CSS】(トリッキーな方法で)透過波紋! - Little Strange Software
からの追加・変更箇所を赤太字にしています。
コード改変の流れ
まず、元の「透過波紋」は、
- 「下敷きグラデーション」と「部分透過した波紋グラデーション」の2枚を重ねて表示。
- 「部分透過した波紋グラデーション」だけをアニメーションで拡大。
というものでした。
そこに「波紋が始まる前に水面に落下する水滴」を追加するとしたら…
- 更にもう一枚の「水滴」を上に重ねて表示。
- 波紋が広がり始めるのが「アニメーション開始時」で、広がりきったのが「アニメーション終了時」、そしてアニメーションは infinite 指定で無限に繰り返される事から「アニメーション終了時にちょうど水滴が水面に着水するようにすれば、次の回のアニメーションでそこから波紋が広がる」という事になります。
- 水滴の着水店は、枠のちょうど中央(波紋の開始位置)「50% 50%」の位置。
- なので水滴は「表示位置が『50% 0%(またはそれより小さいマイナス値)』から『50% 50%』まで変化する」ようなアニメーションにすれば良さそうです。
と、ここまで考えてから作り始めました。
まず、「位置」をアニメ対象にするため、前回は「background-size」をkeyframes内で変化させていましたが「background-position」もkeyframesの中に入れる事になります。
まずは、とりあえずbackground-positionの指定をkeyframes内に移動し、0%と100%にコピペします。
background-position:50% 50%,0 0;
↓
@keyframes trwavea{
0%{background-size:100% 100%,100% 100%;}
95%,100%{background-size:2000% 2000%,100% 100%;}
0%{background-position:50% 50%,0 0;}
100%{background-position:50% 50%,0 0;}
}
この時点で一度プレビューし、元のままの動きである事を確認します。
次に、「水滴」のイメージを追加します。
background-image:
radial-gradient(farthest-side,#7777ee 60%,#7777ee00 100%),
radial-gradient(中略),
radial-gradient(中略);
という感じで、background-imageにカンマ区切りで並べているところの一番最初に追加しました。
そして、「background-size」「background-position」もまた、元々2つのグラデーションイメージに対して個別指定していたので、同様に指定を追加する必要があります。
それらはkeyframes内に記述しているので、
@keyframes trwavea{
0%{background-size:20px 10px,100% 100%,100% 100%;}
95%,100%{background-size:20px 30px,2000% 2000%,100% 100%;}
0%{background-position:50% -100%,50% 50%,0 0;}
100%{background-position:50% 50%,50% 50%,0 0;}
}
同様にカンマ区切りで先頭に付け足しました。
あと、ついでにサイズを
「最初は 20px 10px(横20 縦10)」
「最後は20px 30px(横20 縦30)」
と縦長に変化するという細かい事を入れてたりします(ほぼ分かりませんがw)
移動については
「最初は50% -100%(横位置は中央、縦位置は枠の上辺より更に1枠高さ分上の位置)」
「最後は50% 50%(枠中央)」
という指定にしています。
この「-100%」を、「-200%」などにすると移動距離が延びる(ほとんど枠外で見えませんが)事から水滴の落下速度が速くなります。
あとがき
「なんとか、divタグ1つだけで、backgroundを駆使して色々やってみる」という挑戦なので、これはもう「複数のdivタグを駆使したほうが使い勝手の良いものが作れそう」なところにきていますw
ブログ仲間の のんべえさん(id:whisky-coke)が、また別の方法で「透過波紋に水滴を追加」されていて、そちらの方が見ごたえのあるものになっていますので、あわせてご覧ください^^
おまけ:波紋の色変更
【CSS】(トリッキーな方法で)透過波紋! - Little Strange Software
も、今回のもそうなんですが、波紋の色に「濃い暗い色」を指定しています。
この色は、
background-image:
radial-gradient(farthest-side,#7777ee 60%,#7777ee00 100%),
radial-gradient(farthest-side,#8888ff 5%,#8888ff00 6%,#8888ff 7%,#8888ff00 8%,#8888ff 9%,#8888ff00 10%,#8888ff 11%,#8888ff00 12%,#8888ff 13%),
radial-gradient(farthest-side,#6666bb,#8888ff 100%);
この#6666bbで指定した色となっており、ここを変更するだけで波紋の色が変わります。
例えばこの色を「水面の色#8888ffよりは明るい色」の#aaaaffにすると、
こうなります。
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^