利用CSS3的transition属性实现的动画效果，源码如下：
<!DOCTYPE html>
<html>
<head>
<style>
.animated_div
{
width:65px;
height:40px;
background:#92B901;
color:#ffffff;
position:absolute;
font-weight:bold;
font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
padding:20px 10px 0px 10px;
float:left;
margin:5px;
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-webkit-border-radius:5px;
-o-transition-property:width,height,-o-transform,background,font-size,opacity;
-o-transition-duration:1s,1s,1s,1s,1s,1s;
-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration:1s,1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
border-radius:5px;
opacity:0.4;
}
.animated_div:hover
{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity:1;
background:#1ec7e6;
width:90px;
height:60px;
font-size:16px;
}
span
{
display:block;
width:100px;
height:100px;
background:yellow;
opacity:1;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s,opacity 2s, background 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
span:hover
{
width:300px;
opacity:0.2;
background:red;
}
span{
position:absolute;
left:23px;
top:50px;
}
</style>
</head>
<body>
<span>动画演示</span>
<div class="animated_div">CSS3过渡</div>
</body>
</html>
同样的效果还可以使用CSS3的@keyframes、animation实现，参见我的另一篇文章：《WEB动画-CSS3关键帧》
885
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
