SVGを使った キラリとひかるアニメーション効果 「Animated shiny button, using SVG」
PR
Animated shiny button, using SVG
By Marc Edwards
SVGの画像でanimateTransformを使って、キラリと光る効果を与えています
animateTransformの部分
<animateTransform xlink:href="#polyclip" attributeName="transform" type="translate" from="-1000 0" to="2500 0" begin="0s" dur="3s" repeatCount="indefinite" />
form=”-1000 0″ to＝”2500 0” ここで位置の変化を指定しているようです
dur=”3s” これで3秒掛けて変化することを指定しています
<animateTransform>は初めて見るのですが
CSSでアニメーションを加えるのではなく、SVG自体にこうやってアニメーション効果を与えることが出来るようです
使ってみたくなるテクニックです
コード一式がダウンロード出来ます
Download ZIP
PR
短縮URL:
COMMENT