水面の波紋アニメーション

LSSさんのコードの波紋を自分の画像に載せるには・・・LSSさんのコメントから

・background-colorの指定を削除

・radial-gradientがカンマ区切りで並んでいるところの最後に「url(画像ファイルURL)」を追加

・keyframesの0%時・100%時、それぞれの内容の最後に「,100% 100%」を追加

---

自分の画像に波紋を載せるコード

---

<style>
@keyframes suimena{
0%{background-size:0% 0%,20% 20%,50% 50%,100% 100%,100% 100%;}
100%{background-size:20% 20%,50% 50%,100% 100%,200% 200%,100% 100%;}
}
.suimen{
height:100px;

background-image:
radial-gradient(farthest-side,#aaaaff00 91.9%,#aaaaff 95.9%,#aaaaff00 100%),
radial-gradient(farthest-side,#aaaaff00 91.9%,#aaaaff 95.9%,#aaaaff00 100%),
radial-gradient(farthest-side,#aaaaff00 91.9%,#aaaaff 95.9%,#aaaaff00 100%),
radial-gradient(farthest-side,#aaaaff00 91.9%,#aaaaff 95.9%,#aaaaff00 100%),
url("https://cdn-ak.f.st-hatena.com/images/fotolife/n/non704/20220624/20220624222631.jpg");
background-position:50% 50%;
background-repeat:no-repeat;
animation:suimena 1s linear infinite;
}
</style>
<div class="suimen"> </div>

＊高さは自分の画像の高さに合わせます。

---

いつものように作れてもいい写真がないので・・・ブログに出来ません。(^^;)