1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

css3用transtion属性实现动画效果

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>    	<style type="text/css">      	#jrtj{      		width: 200px;      		height: 150px;      		background: dodgerblue;      		/*transition过渡的意思 3s 3秒的意思*/      		/*transition: width 3s;*/      		/*0.2s是延时0.2秒才开始动的意思   linear是匀速(相同速度开始至结)*/      		/*transition:width 3s 0.2s  linear;*/      		/*ease-in 开始的时候慢,之后快*/      		/*transition:width 3s 0.2s  ease-in;*/      		/*all比较费资源点*/      		/*transition:width all 3s 0.2s  ease-in;*/      		/*指定要监控的属性  property属性的意思*/      		transition-property: width;      		/*指定运动时间   duration持续的时间的意思*/      		transition-duration: 2s;      		/*指定延迟时间  delay延迟的意思*/      		transition-delay:0.5s;      		/*运动曲线   timing 定时的意思  function功 能,作用 */      		transition-timing-function: ease-in;      	}      	#jrtj:hover{      		width: 900px;      	}      	</style>      </head>      <body>      	<div id="jrtj">      	</div>      </body>      </html>

代码效果点上面的运行代码

原文链接:https://www.qiquanji.com/post/7499.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: