您的位置:首页 > Web前端 > CSS

css3-元素属性动画--transition

2016-07-28 00:00 751 查看
摘要: 看到炫酷的东西,想记下来,以后应该会用到。

参考w3c的例子,自己尝试改改上面的属性和属性值
html代码如下:

<div>123456</div>

css代码如下:

div{
width: 200px;
background-color: yellow;
height: 200px;
text-align: center;
line-height: 200px;
opacity: 1;
font-size: 1em;
transition: all 2s;
-moz-transition: all 2s;	/* Firefox 4 */
-webkit-transition: all 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}
div:hover{
width: 300px;
background-color: blue;
height: 400px;
font-size: 2em;
opacity: 0.5;
}

除了颜色和宽高属性外,还有很多可以动画属性,请参考
http://www.css88.com/book/css/properties/transition/transition-property.htm
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: