transtion属性
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div
{
width: 100px;
height: 50px;
background-color: red;
/*告诉系统哪个属性需要执行过渡效果*/
transition-property: width,background-color;
/*告诉系统过渡效果持续的时长*/
transition-duration: 5s,1s;
}
div:hover
{
width: 300px;
background-color: blue;
}
</style>
</head>
<body>
<!--
1,过渡三要素
1.1必须要有属性发生变化
1.2必须告诉系统哪个属性需要执行过渡效果
1.3必须告诉系统过渡效果持续时长
2.注意点
当多个属性需要同时执行过渡效果时用逗号隔开即可
transition-property: width, background-color;
transition-duration: 5s, 5s;
-->
<div></div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/09/17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
