CSS中有很多功能强大的方法,其中过渡属性transition就很牛叉。你不用写一行JavaScript代码,随便写点css就可以实现一个动画效果。下面结合我在W3C网站上看到的实例,举个栗子说明下(⊙o⊙)…
鼠标碰我(*^__^*)
上面是一个过渡动画的demo,效果是不是很帅啊!
.animated_div{
font-size: 12px;
width:50px;
height:40px;
background:#92B901;
color:#ffffff;
position:relative;
font-weight:bold;
padding:8px 8px 0px 8px;
margin:5px;
-webkit-transition:-webkit-transform 1s,background 1s,width 1s,height 1s,font-size 1s;
-o-transition-property:width,height,-o-transform,background,font-size;
-o-transition-duration:1s,1s,1s,1s,1s;
-moz-transition-property:width,height,-o-transform,background,font-size;
-moz-transition-duration:1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size;
transition-duration:1s,1s,1s,1s,1s;
}
.animated