SVG初心者に！SVGとCSSでボーダーにちょっとかっこいいアニメーションをつけるデモ
SVGをちょっと始めてみたいな、という人にもちょうどよさそうなテキストの周りに表示するボーダーをアニメーションで表示するデモを紹介します。 SVG Border Animation コードは簡単、コピペで利用できます。 HTML <div class="svg-wrapper"> <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg"> <rect class="shape" height="60" width="320" /> <div class="text">coliss</div> </svg> </div> CSS html, body { background: rgb(20,20,20); text-align: center; height: 100%; overflow: hidden; } .svg
[CSS]アイデアが面白い！画像に美しいインタラクションを加えるスタイルシート
風景写真など、普通の画像の上にグリッドを描き、各マス目をホバーした際に尾ヒレのようにフェードで追従させるエフェクトが美しいスタイルシートを紹介します。 便利になるとかそういった類いのものではありませんが、ちょっとした何かに使ってみたいですね。 JavaScript無しというのはポイント高いです。 デモのアニメーション 実際の動作は下記ページで確認できます。 デモはCSS3対応ブラウザでご覧ください、Chromeが一番美しくエフェクトを描画します。 LeTrailing Effect 実装はシンプルで、あえて難点をあげれば空divを数多く使うことでしょうか。 HTML 画像はbodyの背景で表示されているので、HTMLはグリッドを描くdivだけです。 <body> <div class="div"></div> <div class="div"></div> ... ... <div cla
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
