Question

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

我想让我的井扩展并在鼠标悬停时发光

2 个答案: