万户资源科技
万汇资源微信公众号

微信扫码有惊喜!

用CSS3实现动画效果——transition属性

luping 2016-01-06 技术

主要讲一下CSS3的动画效果——transition属性。无需jQuery就可以实现动画的效果:

<html>
<head>
<style>
div{ width:200px;
	 height:100px;
	 background:#F99;
	 box-shadow:10px 10px 10px #FC3;    /*盒子阴影,变量分别为右,下,模糊程度,颜色*/
	 transition-property:width;         /*过渡的名称,宽或高*/
	 transition-duration:2s;            /*过渡的时间*/
	 transition-timing-function:ease; /*时间曲线,默认为“ease”*/
	 transition-delay:0s;               /*等待时间*/
	 transition:width 1s linear 2s,height 2s;  /*如果想宽和高同时变化,只用在中间加上逗号即可*/
	 /*可以简写为transition:width 2s linear 0s;*/
	}
a{ text-align:center;display:block; }
div:hover{width:300px; height:400px;}
</style>
</head>
<body>
<div><a>css3动画效果</a></div>
</body>
</html>


实现效果如图:


QQ图片20160106190930.png

经过变化后:

blob.png




——597

文章关键词
transition属性
CSS3动画
transition动画
qq qq tel
服务热线:

134-1954-9128