CSSを自由自在に操ることができるようになったら、それはデザインが無敵に近くなるでしょう。
そんなスーパーマンを夢見ている、ユゲタです。
今回は、今となっては懐かしの、Windows8の起動画面で、面白いLoadingアニメーションがあったので、cssで再現してみました。
覚えている人はもしかすると「懐かしい！」と感じる人もいるかもしれません。
ソース
index.html
<div class='spinner'>
<div class="circle orbit-1"></div>
<div class="circle orbit-2"></div>
<div class="circle orbit-3"></div>
<div class="circle orbit-4"></div>
<div class="circle orbit-5"></div>
</div>
<style>
.spinner{
width:64px;
height:64px;
margin:8px;
position:relative;
}
.spinner .circle{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
transform-origin:center;
animation-name: anim-spinner;
animation-duration: 5.5s;
animation-iteration-count: infinite;
opacity:0;
}
.spinner .circle::before{
content:'';
width:13%;
height:13%;
background-color:blue;
border-radius:50%;
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
}
.spinner .orbit-1{animation-delay: 0s;}
.spinner .orbit-2{animation-delay: 0.24s;}
.spinner .orbit-3{animation-delay: 0.48s;}
.spinner .orbit-4{animation-delay: 0.72s;}
.spinner .orbit-5{animation-delay: 0.96s;}
@keyframes anim-spinner{
0% {
transform:rotate(225deg);
opacity: 1;
animation-timing-function: ease-out;
}
7% {
transform:rotate(345deg);
animation-timing-function: linear;
}
30% {
transform:rotate(455deg);
animation-timing-function: ease-in-out;
}
39% {
transform:rotate(690deg);
animation-timing-function: linear;
}
70% {
transform:rotate(815deg);
opacity: 1;
animation-timing-function: ease-out;
}
75% {
transform:rotate(945deg);
animation-timing-function: ease-out;
}
76% {
transform:rotate(945deg);
opacity: 0;
}
100% {
transform:rotate(945deg);
opacity: 0;
}
}
</style>
サンプル
解説
構成は非常にシンプルで、５つの玉の要素をdivで囲って作っているだけです。
それぞれの玉は全く同じ構成で、before疑似属性を使って、描く円の上部に小さな玉を作っています。
それをtransform-originをcenterにした状態でくるくると回るanimationをセットしている状態です。
そして、５つの玉をanimation-delayを使って、少しずつ遅らせて動かすことによって、windows8のloadingアニメーションが出来がります。
関連リンク
他のNowLoadingも見る
0 件のコメント:
コメントを投稿