SVGを使った キラリとひかるアニメーション効果 「Animated shiny button, using SVG」

kiratto
このエントリーをはてなブックマークに追加
PR

Animated shiny button, using SVG
By Marc Edwards

DEMO 表示

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

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)