[CSS]これは素敵なアイデア！borderを使ったCSS3アニメーションのテクニック

Simple yet amazing CSS3 border transition effects デモ 実装 デモ デモはFirefox, Chrome, Safariなどのモダンブラウザでご覧ください。 IEはたぶん10でしょうか。 デモは大きく分けて、3種類です。 デモ下段 最後は矩形のデモ、円形とは異なるアニメーションが楽しいです。 実装 HTML HTMLは非常にシンプルでa要素にclassを指定するだけです。 <a href="#" class="one"></a> <a href="#" class="two"></a> <a href="#" class="three"></a> ... ... CSS まずは、共通のスタイルシートから。 かわいい車の画像はdate:imageです。 a { background-image: url(data:image/gif;base

[kana321]

コリス

[crystaline]

borderをhover時にアニメーションさせるtips

[nunchaku]

マウスオーバーで動くアニメーション

[toguo]

リンクとかに使えるかも

[sugarshin]

from W3Q Reader http://w3q.jp/rs

[bleu-bleut]

ボーダーの線の太さを変えたりすることで面白い効果を与える。

[ko-ya-ma]

javascriptなしのホバーアニメーション。

[naoki0311]

IE 10では動いた！ぬるぬるしてて素敵。

[ledsun]

動きがかわいいなぁ。でもIE9では動かない。

[pink_dark]

これはいいなあ。RPGのエフェクトみたいだ。

[kussun]

border のみでこれだけの効果が出せるのか。IE9以下は未対応だけど。

[seteoceano]

これは素敵なアイデア！borderを使ったCSS3アニメーションのテクニック

[Donca]

✔ [CSS]これは素敵なアイデア！borderを使ったCSS3アニメーションのテクニック