[CSS] offset-pathを使って土星のわっかアニメーションを構築

先日（２週間ほど前）、このブログのネタとして作ったロゴが、個人的になんとなく気に入っていて、 そのロゴのクリンと土星の輪みたくなっているところをアニメーションさせたくて仕方がなくなってきたので、 今回は、これまであまり使ったことがないoffset-pathというcssの機能を使いこなして土星の輪っかアニメーションを作ってみたいと思います。 先日のブログリンク BoxySVGでロゴ作りチュートリアル デモ いきなり完成形をお見せします。 いかがですか？ 色やグラデーションなども含めて、いろいろなテクニックが入っていて、コレCSSだけでできちゃうので、覚えておくと効果的なWebデザインが作れちゃうかもね。 ソースコード ring.html <div class="ring-area"> <div class="ring" id="path"></div> <div class="atom"><