こんにちは、ワタナベです。
今回はCSSアニメーションで円を描く方法の備忘録です。
完全CSSのみでも再現できるようですが、SVGの方が色々と融通が利くため、今回はSVGを利用したアニメーションとなります。
sample
See the Pen Untitled by Akiho (@wcaotdaenpaebne) on CodePen.
円のサイズによって下記の数値を変更します。
stroke-dasharray: 数値;
stroke-dashoffset: 数値;
デベロッパーツールを使用すると楽です。
割と簡単だったので、使えそうな場面では取り入れていきたいと思います(^^)/
▼THANKS！
話は変わりますが、先日誕生日を迎え今年も代表夫妻からプレゼントを頂きました。
ありがとうございます！とても良い香りです(*^^*)
それではまた次回。
ご閲覧ありがとうございました
