LCCの飛行機搭乗料金が安い安いと聞いてはいましたが、jetstar社が特別イベントで「国内線90円セール」というのをやっているのを見て、もはや電車やバスよりも安い値段で飛行機に乗れる時代が来たことを知った、ユゲタです。
関東であれば、成田空港から、地方の空港までの運賃が90円なんですが、実際には、カード支払いの手数料や、なんかしたらの料金が加わって3000円弱ぐらいにはなってしまいますが、それでも、千葉に住んでいる人じゃなければ、成田空港に行く電車賃の方が高くなってしまう人も多いのではないでしょうか？
複雑な気分になりそうですが、それでも、格安飛行機料金は魅力ですね。
用事が無くても買ってしまいそうです・・・
loadingアニメ「leader」
svgでのloadingアニメ素材にハマってしまい、日々gif画像やcssアニメなどを見つけては、svgに移植しているのがすっかり趣味になってしまいましたが、 今回作ったloading素材は、「leader」というタイプのもので、３点リーダーっぽい見た目で読み込み中を印象づけることができる、かなりスタンダードなモノです。<svg class="leader" width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<style>
svg.leader circle{
fill:#1DA9F1;
animation: anim-leader 0.9s ease-in-out infinite;
}
svg.leader circle.leader-1{
transform-origin:10px 32px;
animation-delay: 0s;
}
svg.leader circle.leader-2{
transform-origin:32px 32px;
animation-delay: 0.3s;
}
svg.leader circle.leader-3{
transform-origin:54px 32px;
animation-delay: 0.6s;
}
@keyframes anim-leader{
0% {transform:scale(1.0);}
30% {transform:scale(1.0);}
65% {transform:scale(2.0);}
100% {transform:scale(1.0);}
}
</style>
<g>
<circle class="leader-1" cx="10" cy="32" r="4"></circle>
<circle class="leader-2" cx="32" cy="32" r="4"></circle>
<circle class="leader-3" cx="54" cy="32" r="4"></circle>
</g>
</svg>
ソースコード事態もシンプルで、内容に関しての解説はしなくても問題ないでしょう。
実際にサンプルを見てもらったほうがわかりやすいですね。
プレビュー
See the Pen svg-loading leader by YugetaKoji (@geta1972) on CodePen.
0 件のコメント:
コメントを投稿