透過波紋に水滴を落とす - のんべえの気まぐれ

いつも読んで頂きありがとうございます。

前回の記事で雨と波紋のコードの作品をつくりましたが、LSSさんが透過波紋のコード

を出してきたので遊んでみました。

透過波紋に水滴を落とす

背景を付けれない？
背景付透過波紋
最後に

背景を付けれない？

透過波紋はベタ塗り１択なのでグラデーション部分を画像に変えると波紋が消えてしま

うみたいです。でも、画像の背景色と同じ色にすると画像に透過波紋を挿入できます。

たとえば下の赤い四角の所に波紋を置きたい場合は同じカラーコードにすれば大丈夫で

す。波紋の色は自分で合わせてください。

透過波紋背景

背景付透過波紋

画像に透過波紋を設置して水滴が落ちるバージョンを作りました。

参考にコードを載せます

CSSコード

<style>
@keyframes trwavea{
0%{background-size:100% 100%,100% 100%;}
95%,100%{background-size:2000% 2000%,100% 100%;}
}
.trwave{
position: absolute;
top:230px; left:120px;
width:130px;
height:20px;
background-image:
radial-gradient(farthest-side,#91c7edff 5%,#91c7ed00 6%,#91c7edff 7%,#91c7ed00 8%,#91c7edff 9%,#91c7ed00 10%,#91c7edff 11%,#91c7ed00 12%,#91c7edff 13%),
radial-gradient(farthest-side,#ffffff,#91c7edff 100%);
background-position:50% 50%,0 0;
background-repeat:no-repeat;
animation:trwavea 8s linear infinite;
}
@keyframes trwavea2{
0%,30%{background-size:100% 100%,0% 0%;}
31%{background-size:100% 100%,100% 100%;}
95%,100%{background-size:2000% 2000%,100% 100%;}
}
.trwave2{
position: absolute;
top:-50px; left:80px;
width:90px;
height:20px;
background-image:
radial-gradient(farthest-side,#91c7edff 5%,#91c7ed00 6%,#91c7edff 7%,#91c7ed00 8%,#91c7edff 9%,#91c7ed00 10%,#91c7edff 11%,#91c7ed00 12%,#91c7edff 13%),
radial-gradient(farthest-side,#ffffff,#91c7edff 100%);
background-position:50% 50%,0 0;
background-repeat:no-repeat;
animation:trwavea2 6s linear infinite;
}
@keyframes trwavea3{
0%,20%{background-size:100% 100%,0% 0%;}
21%{background-size:100% 100%,100% 100%;}
95%,100%{background-size:2000% 2000%,100% 100%;}
}
.trwave3{
position: absolute;
top:25px; left:60px;
width:80px;
height:20px;
background-image:
radial-gradient(farthest-side,#91c7edff 5%,#91c7ed00 6%,#91c7edff 7%,#91c7ed00 8%,#91c7edff 9%,#91c7ed00 10%,#91c7edff 11%,#91c7ed00 12%,#91c7edff 13%),
radial-gradient(farthest-side,#ffffff,#91c7edff 100%);
background-position:50% 50%,0 0;
background-repeat:no-repeat;
animation:trwavea3 5s linear infinite;
}
.hamonhaikei{
position: relative;
width:348px;
height:300px;
background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/w/whisky-coke/20220714/20220714093558.jpg);
background-size:100%;
background-repeat:no-repeat;
}
@keyframes sizuku{
0%,70%{background-position-x:53%;background-position-y:-10%;}
100%{background-position-x:53%;background-position-y:80%;}
}
.sizuku{
width:348px;
height:300px;
border-radius:15px;
animation:sizuku 8s linear infinite ;
background-image:radial-gradient(15px,#ffffffff 80%,#ffffff00 100%);
background-size:4px 4px;
background-repeat:no-repeat;
}
@keyframes sizuku2{
0%{background-position-x:70%;background-position-y:-1%;}
35%{background-position-x:70%;background-position-y:65%;}
36%,100%{background-position-x:70%;background-position-y:-1%;}
}
.sizuku2{
width:348px;
height:300px;
border-radius:15px;
animation:sizuku2 6s linear infinite ;
background-image:radial-gradient(15px,#ffffffff 80%,#ffffff00 100%);
background-size:3px 3px;
background-repeat:no-repeat;
}
@keyframes sizuku3{
0%{background-position-x:87%;background-position-y:-1%;}
25%{background-position-x:87%;background-position-y:70%;}
26%,100%{background-position-x:87%;background-position-y:-1%;}
}
.sizuku3{
width:348px;
height:300px;
border-radius:15px;
animation:sizuku3 5s linear infinite ;
background-image:radial-gradient(15px,#ffffffff 80%,#ffffff00 100%);
background-size:3px 3px;
background-repeat:no-repeat;
}
</style>
<div class="hamonhaikei">
<div class="sizuku">
<div class="sizuku2">
<div class="sizuku3">
<div class="trwave">
<div class="trwave2">
<div class="trwave3"> </div>
</div>
</div>
</div>
</div>
</div>
</div>

波紋の位置設定
背景画像 .hamonhaikeiをposition: relative;で固定ます。
次に波紋.trwaveにposition: absolute;を指定し背景画像からの距離top:○○px; left:○○px;を指定します。二つ目の波紋は一つ目の波紋からの距離を指定します。同じく三つめは二つ目の波紋からの距離を指定します。

2つ目以降の波紋の開始のタイミングはkeyframesで調整しています。

波紋の大きさ
width:○○px;height:○○px;で設定します。

水滴のコード
keyframesの{background-position-x:○○%;background-position-y:○○%;}で落とす場所と波紋の位置を指定し波紋に落ちた時に戻るように指定します。
波紋に落ちるタイミングは秒数も含めて何回も試さないとダメなので面倒かもしれません。