Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【謎CSS】アニメーション区切線

 どうも!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>が書かれたページ内であれば、この一行を複数記述する事で複数の区切り線として使用できます。

 

 

余談:ニュートンじゃないゆりかご

この動き、着想の元は「ニュートンのゆりかご」ですが、ニュートンのゆりかごはこんな風に増えたり減ったりしません。

 


www.youtube.com

 

ニュートンのゆりかごは同じ数だけ反対側に弾きだされますが、複数動かしたり高さを変えたりした時の動きが面白いですね。

 

…素直にこれを再現したものにしておいた方が良かったかな?という気がしてきましたw

 

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^