Bluetoothヘッドホンに恵まれない、ユゲタです。
購入してもすぐに壊れる連続で、すでに１０個以上のヘッドホンを交換している状態です。
左右独立型で小さめのカナル型のが今の所仕様しているヤツですが、これもいつお亡くなりになるかわかりません・・・
やはりApple純正のヤツを買うのが良いのでしょうか？
Rainbow
本日のsvg-loadingアニメーションは、虹色のオブジェクトが楽しそうに動くアニメーションです。<svg class="rainbow-spin" width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<style>
svg.rainbow-spin path{
transform-origin: 32px 32px;
animation: spin 2.0s cubic-bezier(.175, .885, .32, 1.275) infinite;
}
svg.rainbow-spin .rainbow-1{
animation-delay: -50ms;
}
svg.rainbow-spin .rainbow-2{
animation-delay: -100ms;
}
svg.rainbow-spin .rainbow-3{
animation-delay: -150ms;
}
svg.rainbow-spin .rainbow-4{
animation-delay: -200ms;
}
svg.rainbow-spin .rainbow-5{
animation-delay: -250ms;
}
@keyframes spin {
0%, 15% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
<path class="rainbow-1" fill="none" d="M 2,32 a28,28 180 0 1 60,0" stroke="rgb(255, 80, 80)" stroke-width="4" />
<path class="rainbow-2" fill="none" d="M 8,32 a22,22 180 0 1 48,0" stroke="rgb(255,255, 80)" stroke-width="4" />
<path class="rainbow-3" fill="none" d="M14,32 a16,16 180 0 1 36,0" stroke="rgb( 80,255, 80)" stroke-width="4" />
<path class="rainbow-4" fill="none" d="M20,32 a10,10 180 0 1 24,0" stroke="rgb( 80,255,255)" stroke-width="4" />
<path class="rainbow-5" fill="none" d="M26,32 a 4, 4 180 0 1 12,0" stroke="rgb( 80, 80,255)" stroke-width="4" />
</svg>
See the Pen svg-loading Rainbow-spin by YugetaKoji (@geta1972) on CodePen.
動きが面白くて、codepenに掲載されていたcssバージョンをsvgに移植してみました。 この素材は、背景が黒にするのが一番良く見えるのですが、白系や色系の背景の場合は、中の色味を変更して使うのがいいでしょうね。
0 件のコメント:
コメントを投稿