どうも！LSSです！！
ふと思いついた、CSS小ネタです。
アニメーション飾り罫
コード
<style>
@keyframes dotkeia{
0%,80%{background-position:20px 0px,60px 0px;}
85%{background-position:20px 0px,20px -10px;}
90%{background-position:20px 0px,-20px 0px;}
95%{background-position:60px 10px,-20px 0px;}
100%{background-position:100px 0px,-20px 0px;}
}
.dotkei{
width:100%;
height:40px;
background-image:radial-gradient(circle at 50% 50%,#ff8888ff 5%,#ff888800 17%),radial-gradient(circle at 50% 50%,#8888ffff 5%,#8888ff00 17%);
background-size:80px 40px;
animation:dotkeia 8s linear 0s infinite;
}
</style>
<div class="dotkei"> </div>
使い方と仕組み
コード全文を、使用したいWebページやブログ記事にコピー＆ペースト。
そして最後の一行、
<div class="dotkei"> </div>
を、この飾り罫を仕込みたいところに移動します。
<style>から</style>が書かれたページ内であれば、この最後の一行はいくつでも配置できます^^
文章が長くなった時など、段落と段落の間に入れると、ちょっとした気分転換になりますね。
仕組みとしては、
radial-gradient(circle at 50% 50%,#ff8888ff 5%,#ff888800 17%)
で描いたピンクの玉と、
radial-gradient(circle at 50% 50%,#8888ffff 5%,#8888ff00 17%)
で描いた青い玉を、@keyframes内で表示位置をずらして指定している事で、交互に並んだ状態になっています。
0%,80%{background-position:20px 0px,60px 0px;}
↑この部分ですね。
そしてその表示位置が時間経過で変化するように、@keyframes内にbackground-positionを値を変えながら並べているので、それに従って玉が移動する事になります。
ちなみに、動く速さを変える時は、コードの終盤にある、
animation:dotkeia 8s linear 0s infinite;
の8sの部分を大きい数値にするとゆっくりに、小さくすると素早く動くようになります。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
