我想讓我的水井在鼠標懸停時展開併發光

-1

我試圖在我的頁面上覆制發現的效果Here，我不太確定如何去解決這個問題。我正在使用twitter bootstrap 2.0我想讓我的水井在鼠標懸停時展開併發光

來源

2012-11-27 Stizz1e

當它是你的頁面時，你應該知道你是如何做到的。 –

http://stackoverflow.com/faq#howtoask –

這不是一個問題。 – netcoder

我認爲你最好的選擇是瀏覽這篇文章。它會讓你很好地瞭解如何使用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>

來源

2012-11-27 16:21:10 HjalmarCarlson

正如我預期的CSS3將是動畫偉大的選擇喜歡這個。像練習一樣使用這個垃圾箱

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

來源

2012-11-27 16:23:01 dmi3y

我想讓我的水井在鼠標懸停時展開併發光

回答

相關問題