html - マウスオーバーでウェルを拡張して光らせたい

Question

私は自分のページでここにある効果を複製しようとしていますが、どうすればよいのかよくわかりません。私はtwitterブートストラップ2.0を使用しています

Answer 1

私はあなたの最善の策はこの記事を読むことだと思います。それはあなたにCSS3でアニメーション化する方法についてかなり良い要約を与えるでしょう。

http://www.css3.info/preview/css3-transitions/

これが私がまとめた簡単な解決策です：http：//jsfiddle.net/zStN5/

CSS：

.button {
margin:10px;
background: #700;
color: #fff;
padding: 5px 10px;
text-decoration: none;
height: 60px;

-webkit-box-shadow: 0px 0px 3px #212121;
-moz-box-shadow: 0px 0px 3px #212121;
box-shadow: 0px 0px 3px #212121;

/* Animate all properties across supporting browsers */
-webkit-transition: all 1s ease-in-out;
/* -o-transition: all 1s ease-in-out; */
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.button:hover {
background: #b00;
height: 100px;

/* Box shadow animation bugged in Opera */
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}​

HTML

<div class="button" href="#">Your Div</div>

Answer 2

私の将来のCSS3は、このようなアニメーションに最適です。練習のようにこのビンを使用してください

http://jsbin.com/egotig/2/edit