どうも!LSSです!!
ブログ・Webサイトで使いやすそうな CSSネタを考えてみようと思うと、枠や区切り線あたりに落ち着くのかな?という気がする今日この頃。
…そして、使えるんだかどうなんだか?な謎CSS「アニメーション区切り線」が出来ました^^;
アニメーション区切り線
コード
<style>
@keyframes hrcrka{
0%,20%,28%,36%,44%,52%,60%,68%,76%,84%,92%,100%{background-position-x:calc(50% - 40px),calc(50% - 20px),50%,calc(50% + 20px),calc(50% + 40px);}
24%{background-position-x:0,calc(50% - 20px),50%,calc(50% + 20px),calc(50% + 40px);}
32%{background-position-x:calc(50% - 40px),calc(50% - 20px),50%,calc(100% - 20px),100%;}
40%{background-position-x:0,20px,40px,calc(50% + 20px),calc(50% + 40px);}
48%{background-position-x:calc(50% - 40px),calc(100% - 60px),calc(100% - 40px),calc(100% - 20px),100%;}
56%{background-position-x:0,20px,40px,60px,80px;}
64%{background-position-x:calc(50% - 40px),calc(50% - 20px),50%,calc(50% + 20px),100%;}
72%{background-position-x:0,20px,50%,calc(50% + 20px),calc(50% + 40px);}
80%{background-position-x:calc(50% - 40px),calc(50% - 20px),calc(100% - 40px),calc(100% - 20px),100%;}
88%{background-position-x:0,20px,40px,60px,calc(50% + 40px);}
96%{background-position-x:calc(100% - 80px),calc(100% - 60px),calc(100% - 40px),calc(100% - 20px),100%;}
}
.hrcrk{
widht:100%;
height:22px;
border-radius:11px;
border:2px solid #000000;
background-color:#4444dd;
background-image:
radial-gradient(farthest-side,#f8f8f8 0%,#dddddd 90%,#dddddd00 100%),
radial-gradient(farthest-side,#f8f8f8 0%,#dddddd 90%,#dddddd00 100%),
radial-gradient(farthest-side,#f8f8f8 0%,#dddddd 90%,#dddddd00 100%),
radial-gradient(farthest-side,#f8f8f8 0%,#dddddd 90%,#dddddd00 100%),
radial-gradient(farthest-side,#f8f8f8 0%,#dddddd 90%,#dddddd00 100%);
background-size:20px 20px;
background-position-y:50%;
background-repeat:no-repeat;
animation:hrcrka 15s linear infinite;
}
</style>
<div class="hrcrk"> </div>
コード概要
コードの大部分がkeyframes定義(アニメーションの動きを設定)になります。
動いてる玉を描いているのは
「radial-gradient(farthest-side,#f8f8f8 0%,#dddddd 90%,#dddddd00 100%),」
の部分で、5つとも同じように描いていますが、それぞれ色を変えてみてもいいかもですね。(#f8f8f8 や #dddddd はカラーコードです。最後だけ後ろに「00」をつける事で、円の外が透明になるようにしています。)
最後の「<div class="hrcrk"> </div>」が区切り線本体となるHTMLで、<style>~</style>が書かれたページ内であれば、この一行を複数記述する事で複数の区切り線として使用できます。
余談:ニュートンじゃないゆりかご
この動き、着想の元は「ニュートンのゆりかご」ですが、ニュートンのゆりかごはこんな風に増えたり減ったりしません。
ニュートンのゆりかごは同じ数だけ反対側に弾きだされますが、複数動かしたり高さを変えたりした時の動きが面白いですね。
…素直にこれを再現したものにしておいた方が良かったかな?という気がしてきましたw
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^