どうも！LSSです！！
今回は、
のコードアレンジ、という小ネタです。
透過波紋、中心位置変更
コード
<style>
@keyframes trwavea{
0%{background-size:100% 100%,100% 100%;}
95%,100%{background-size:2000% 2000%,100% 100%;}
}
.trwave{
height:210px;
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%,#6666bb,#8888ff 100%);
background-position:0% 50%,0 0;
background-repeat:no-repeat;
animation:trwavea 3s linear infinite;
}
</style>
<div class="trwave"> </div>
赤太字部分が「横位置 縦位置」を指定しています。
３か所の数字を合わせておく必要があります。
元コードには無かった「at」指定を追加しています
２つのradial-gradient内にそれぞれ「at 0% 50%」を追加しています。
元のコードにはatを指定していませんでしたが、指定を省略した場合には「at 50% 50%」と指定したのと同じ事になります。
例えばこれを「20% 77%」にした場合は、３つとも「20% 77%」に合わせると、「枠横幅に対して左から20%、枠高さに対して上から77%の位置」を中心とした波紋になります。
0か50か100じゃないと合わないのでは？って
思っていましたが…どうもatとpositionがうまく噛みあって、自由に中心位置が指定できるようですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
