やり方が違うと思うのですが・・・。
いつものように朝起きてLSSさんのブログにお邪魔すると見出しがとても素敵でした。
nonさんのコメントの返事にかかれていたことがわからなくて自己流でやってみました。
角も丸くしていないし、波紋の形も違います。
<style>
@keyframes trwavea{
0%{background-size:100% 100%,100% 100%;}
95%,100%{background-size:2000% 2000%,100% 100%;}
}
.trwave{
height:40px;
background-image:
radial-gradient(farthest-side,#87cefa 5%,#87cefa00 6%,#87cefa 7%,#87cefa00 8%,#87cefa 9%,#87cefa00 10%,#87cefa 11%,#87cefa00 12%,#87cefa 13%),
radial-gradient(farthest-side,#ffffff,#87cefa 100%);
background-position:50% 50%,0 0;
background-repeat:no-repeat;
animation:trwavea 13s linear infinite;
}
</style>
<div class="trwave">
<h2><span style="font-size: 80%;">やり方が違うと思うのですが・・・。</span></h2>
追記
<style>
@keyframes trwavea{
0%{background-size:100% 100%,100% 100%;}
95%,100%{background-size:2000% 2000%,100% 100%;}
}
.trwave{
height:50px;
border-radius:20px 0px 20px 20px;
background-image:
radial-gradient(farthest-side at 0% 50%,#8888ff 5%,#8888ff00 6%,#8888ff 7%,#8888ff00 8%,#8888ff 9%,#8888ff00 10%,#8888ff 11%,#8888ff00 12%,#8888ff 13%),
radial-gradient(farthest-side at 0% 50%,#ffffff,#8888ff 100%);
background-position:0% 50%,0 0;
background-repeat:no-repeat;
animation:trwavea 13s linear infinite;
}
</style>
<div class="trwave">
<h2><span style="color: #ffffff;">やり方が違うと思うのですが</span></h2>
</div>
<p> </p>
書き換えずに「角丸右下角」「波紋の中心位置変更」が出来ました。
訳が分からなくなってきました。
