CSSを笑うものはCSSに泣くかもしれないし、泣かないかもしれない、ユゲタです。
よくHTMLはマークアップ言語で、CSSは設定補助的な言語であると、つぶやかれていますが、
ホームページ制作のシステム担当で、デザインが苦手という人で、まともにCSSを構築できない人がいるようです。
実際に、そうした人は、他人がデザインしたWEBページしか構築できないため、独創性が欠けた仕事しかできなくなってしまいます。
慣れると簡単なCSSを覚えると、自分でも簡単で、見た目の良いデザインのホームページが作れる様になるのにね。
ということで、cssを使って、コピペで使えるコードをブログでもたくさん掲載して行こう計画を開始してみようと思います。
初回の今回は、システムの人がよく使う「NowLoadingアニメーション」です。
コピペしてどんどんお使いください。
もちろん、著作権は、
MITですよ。
コード
sample.html
<div class="ring"></div>
<style>
.ring{
display:block;
position:relative;
width:64px;
height:64px;
border:1px solid #1DA9F1;
border-radius:50%;
animation: anim-ring 2s ease-in-out infinite;
}
.ring:before{
content:"";
position:absolute;
top:calc(8% / 2 * -1 - 2px);
left:calc((100% - 8%) / 2 - 2px);
width:8%;
height:8%;
border:2px solid #1DA9F1;
border-radius:50%;
background-color:white;
}
@keyframes anim-ring{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
</style>
Sample
関連リンク
他のNowLoadingも見る
