<!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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知