svgに対してCSSを当てる。そしてJSでpathをアニメーションさせる。素敵。

yamadar のブックマーク 2014/01/09 11:11

<blockquote class="hatena-bookmark-comment"><a class="comment-info" href="https://b.hatena.ne.jp/entry/176598646/comment/yamadar" data-user-id="yamadar" data-entry-url="https://b.hatena.ne.jp/entry/s/tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/" data-original-href="https://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/" data-entry-favicon="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftympanus.net%2Fcodrops%2F2014%2F01%2F07%2Fshape-hover-effect-with-svg%2F" data-user-icon="/users/yamadar/profile.png">Shape Hover Effect with SVG | Codrops</a><ul class="comment-tag" style="list-style: none; margin: 0px;"><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%2ACSS3">*CSS3</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%2Asvg">*svg</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/UI">UI</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">デザイン</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%E5%8F%82%E8%80%83">参考</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%2A%2A%E3%81%93%E3%82%8C%E3%81%AF%E3%81%99%E3%81%94%E3%81%84">**これはすごい</a>]</li></ul><br><p style="clear: left">svgに対してCSSを当てる。そしてJSでpathをアニメーションさせる。素敵。</p><a class="datetime" href="https://b.hatena.ne.jp/yamadar/20140109#bookmark-176598646"><span class="datetime-body">2014/01/09 11:11</span></a></blockquote><script src="https://b.st-hatena.com/js/comment-widget.js" charset="utf-8" async></script>

このブックマークにはスターがありません。
最初のスターをつけてみよう！

Shape Hover Effect with SVG | Codrops

tympanus.net2014/01/08

In this tutorial we’ll recreate the hover effect as seen on The Christmas Experiments website. We’ll be using SVG for the shape and Snap.svg for animating it on hover. If you have visited the fanta...

19 人がブックマーク・2 件のコメント

他のコメントを読む

＼コメントがサクサク読めるアプリです／

はてなブックマーク

Shape Hover Effect with SVG | Codrops

はてなブックマーク

公式Twitter

はてなのサービス