cssでGIFのような動きをさせてみました。
sample
sample
●
●
●
●
●
●
●
●
●
●
こんな感じです。もちろん画像は使ってません
htmlでは要素の真ん中にくるようにwarrperとmainを作っておきます
ぐるぐる回してる●を必要数だけ並べてます
ぐるぐる回してる●を必要数だけ並べてます
<div id="wrapper">
<div class="main">
<p id="maru0" class="load">●</p>
<p id="maru1" class="load">●</p>
<p id="maru2" class="load">●</p>
<p id="maru3" class="load">●</p>
<p id="maru4" class="load">●</p>
<p id="maru5" class="load">●</p>
<p id="maru6" class="load">●</p>
<p id="maru7" class="load">●</p>
<p id="maru8" class="load">●</p>
<p id="maru9" class="load">●</p>
</div>
</div>
cssは回転速度を要素ごとに分けているため長いです
.loadのbackground-colorを透過じゃない色をつけて
#maru0だけにすると何が起こっているのかわかりやすいかもしれません
.loadのbackground-colorを透過じゃない色をつけて
#maru0だけにすると何が起こっているのかわかりやすいかもしれません
/* 外枠基本設定 */
#wrapper {
position: relative;
width: 50px;
left:0;
top:40px;
}
.main {
display: none;
width: 100%;
height: 100%;
}
/* ●の基本設定
（適宜変更して下さい）
*/
.load {
background-color: transparent;
position: absolute;
font-size: 8px;
top:50%; /* 上から半分 */
left:50%; /* 左から半分 */
width:40px;
height: 40px;
margin:-20px 0 0 -20px;
}
/* ●の0％～100％まで動きを指定（webkitも記載） */
@keyframes rotate {
0% {
transform: rotate(0deg);
color:black;
-moz-opacity: 1.0;
opacity: 1.0;
}
100% {
transform: rotate(360deg);
color :#BDBDBD;
-moz-opacity: 0.5;
opacity: 0.5;
}
}
@-webkit-keyframes rotate {
/* webkit用keyframes */
0% { -webkit-transform: rotate(0deg);
color:black;
opacity: 1.0;
}
100% {
-webkit-transform : rotate(360deg);
color : #BDBDBD;
opacity : 0.5;
}
}
/* 以下は●１つずつの動作
cubic-bezierの値で動く速度に変化を与えてます
*/
#maru0 {
animation: rotate 2s cubic-bezier(0.1, 1.0, 1.0, 1.0);
-webkit-animation: rotate 2s cubic-bezier(0.1, 1.0, 1.0, 1.0);
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#maru1 {
animation: rotate 2s cubic-bezier(0.2, 0.9, 0.9, 0.9);
-webkit-animation: rotate 2s cubic-bezier(0.2, 0.9, 0.9, 0.9);
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#maru2 {
animation: rotate 2s cubic-bezier(0.3, 0.8, 0.8, 0.8);
-webkit-animation: rotate 2s cubic-bezier(0.3, 0.8, 0.8, 0.8);
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#maru3 {
animation: rotate 2s cubic-bezier(0.4, 0.7, 0.7, 0.7);
-webkit-animation: rotate 2s cubic-bezier(0.4, 0.7, 0.7, 0.7);
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#maru4 {
animation: rotate 2s cubic-bezier(0.5, 0.6, 0.6, 0.6);
-webkit-animation: rotate 2s cubic-bezier(0.5, 0.6, 0.6, 0.6);
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#maru5 {
animation: rotate 2s cubic-bezier(0.6, 0.5, 0.5, 0.5);
-webkit-animation: rotate 2s cubic-bezier(0.6, 0.5, 0.5, 0.5);
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#maru6 {
animation: rotate 2s cubic-bezier(0.7, 0.4, 0.4, 0.4);
-webkit-animation: rotate 2s cubic-bezier(0.7, 0.4, 0.4, 0.4);
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#maru7 {
animation: rotate 2s cubic-bezier(0.8, 0.3, 0.3, 0.3);
-webkit-animation: rotate 2s cubic-bezier(0.8, 0.3, 0.3, 0.3);
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#maru8 {
animation: rotate 2s cubic-bezier(0.9, 0.2, 0.2, 0.3);
-webkit-animation: rotate 2s cubic-bezier(0.9, 0.2, 0.2, 0.3);
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#maru9 {
animation: rotate 2s cubic-bezier(1.0, 0.1, 0.1, 0.1);
-webkit-animation: rotate 2s cubic-bezier(1.0, 0.1, 0.1, 0.1);
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
ちなみにLoadingのように使うと
以下のような感じになります
GIFのがお手軽に感じましたが
GIFよりはサイズが小さい点と画質に左右されないのはいいところですね
以下のような感じになります
GIFのがお手軽に感じましたが
GIFよりはサイズが小さい点と画質に左右されないのはいいところですね
つれづれなるまゝに：退屈なこと、さみしいこと、無聊。 日くらし：＜ひぐらし＞と読む。
朝から晩まで。終日。 ひねもす。 心に移りゆくよしな
朝から晩まで。終日。 ひねもす。 心に移りゆくよしな
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
