html - 我想让我的井扩大并在鼠标悬停时发光

Question

我正在尝试复制在我的页面上找到的效果Here，但我不确定如何去做。我正在使用 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