すこし変更するだけで、簡単に応用がききそうです。ただ、backface-visibility の効果がイマイチ良く解りません。範囲をラップした DIV 内に収めないと、ページのリンクが効かなくなりました。( ページ全体に対して実行するなら、意味ありますが ) あと、フォントの扱いでいろいろ微妙だったので、フォント部分は画像にしたほうがよさそうです。
Loading
Loading
オリジナルはこちらですが、ここではフォントは Google を使っていません。あと、表示位置レイアウトは調整しています。元々の仕様は、 position: fixed; を使用していて、ページ全体に対して固定位置なんですが、これは固定 DIV 内で使う事を想定して、top 指定だとアニメーションの都合で、上下運動になってます。 ま、これはこれでいいかなと。 下のほうは、bottom 指定なので、上下しません
<style type="text/css">
.quiver {
position: absolute;
top: 50px;
left: 250px;
width: 100px;
}
.quiver2 {
position: absolute;
bottom: 50px;
left: 250px;
width: 100px;
}
.arrows {
-moz-animation: equalizor cubic-bezier(0.77, 0, 0.175, 1) 0.5s alternate-reverse infinite;
-webkit-animation: equalizor cubic-bezier(0.77, 0, 0.175, 1) 0.5s alternate-reverse infinite;
animation: equalizor cubic-bezier(0.77, 0, 0.175, 1) 0.5s alternate-reverse infinite;
vertical-align: baseline;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 1px 10px;
border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #0b486b rgba(255, 255, 255, 0);
}
.st {
border-bottom-color: #0b486b;
}
.nd {
border-bottom-color: #3b8686;
}
.rd {
border-bottom-color: #79bd9a;
}
.th {
border-bottom-color: #a8dba8;
}
.fth {
border-bottom-color: #cff09e;
}
span:nth-child(1) {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
span:nth-child(2) {
-moz-animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
span:nth-child(3) {
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
span:nth-child(4) {
-moz-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
span:nth-child(5) {
-moz-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
@-moz-keyframes equalizor {
from {
border-bottom-width: 60px;
}
to {
border-bottom-width: 1px;
}
}
@-webkit-keyframes equalizor {
from {
border-bottom-width: 60px;
}
to {
border-bottom-width: 1px;
}
}
@keyframes equalizor {
from {
border-bottom-width: 60px;
}
to {
border-bottom-width: 1px;
}
}
.box * {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.loading {
display: block;
font: normal 25px/1em "Merriweather Sans", sans-serif;
text-transform: uppercase;
color: #cff09e;
}
</style>
<div class="box" style='width:600px;height:200px;background-color:#141517;position:relative;'>
<div class="quiver"><span class="arrows st"></span><span class="arrows nd"></span><span class="arrows rd"></span><span class="arrows th"></span><span class="arrows fth"></span><span class="loading">Loading</span></div></div>
<br><br>
<div class="box" style='width:600px;height:200px;background-color:#141517;position:relative;'>
<div class="quiver2"><span class="arrows st"></span><span class="arrows nd"></span><span class="arrows rd"></span><span class="arrows th"></span><span class="arrows fth"></span><span class="loading">Loading</span></div></div>
|
|
