ラジオとpodcast大好きっ子の、ユゲタです。
学生時代はAMファンだったのですが、成人してからはもっぱらFM、iphoneを手にしてからはpodcastにどんどん変わっていってますが、
基本的にラジオを聞くという姿勢は、通勤などの移動中や、ジョギング中、何かしらの事務作業をやっている時などに聞きながらの作業ができて、同時に楽しめるので、やめられません。
もちろん、集中する時などは聞けないのですが、まともに聞いていなくても流し聞きをすることもたまにあります。
こうしたラジオ番組の開設も密かに憧れていますね・・・
ソース
<svg class="windows8" width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<style>
svg.windows8 circle{
transform-origin:32px 32px;
fill : blue;
cx : 32px;
cy : 8px;
r : 3;
animation-name: anim-windows8;
animation-duration: 5.5s;
animation-iteration-count: infinite;
opacity:0;
}
svg.windows8 .orbit-1{animation-delay: 0s;}
svg.windows8 .orbit-2{animation-delay: 240ms;}
svg.windows8 .orbit-3{animation-delay: 480ms;}
svg.windows8 .orbit-4{animation-delay: 720ms;}
svg.windows8 .orbit-5{animation-delay: 960ms;}
@keyframes anim-windows8{
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>
<circle class="orbit-1"></circle>
<circle class="orbit-2"></circle>
<circle class="orbit-3"></circle>
<circle class="orbit-4"></circle>
<circle class="orbit-5"></circle>
</svg>
See the Pen svg-loading windows8like by YugetaKoji (@geta1972) on CodePen.
今回のloading素材は、windows8の画面ロードで表示されているボールが回転しながら見え隠れする動きです。 codepenで紹介されていたhtmlバージョンをsvgに変換したものです。 こういう特定のサービスloadingって色々見ていると面白いのが多いですね。
0 件のコメント:
コメントを投稿