我正在尝试复制在我的页面上找到的效果Here，但我不确定如何去做。我正在使用 twitter 引导程序 2.0
问问题
77 次
2 回答
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>
于 2012-11-27T16:21:10.627 回答
0
因为我未来的 CSS3 将是这样的动画的绝佳选择。像练习一样使用这个垃圾箱
于 2012-11-27T16:23:01.270 回答