transtion

最新推荐文章于 2022-10-01 17:06:04 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2022-10-01 17:06:04 发布

阅读量906

点赞数 1

分类专栏： css系列（精通精通）

本文链接：https://blog.csdn.net/qq_37805832/article/details/108654154

版权

css系列（精通精通）专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		 *{
            margin: 0;
            padding: 0;
        }
        div
        {
        	width: 100px;
        	height: 50px;
        	background-color: red;
        	transition-property: width;
        	transition-duration: 1s;
        	/*transition: width 1s linear 0s,background-color 1s linear 0s;*/
        	/*transition: width 5s,background-color 5s,height 5s;*/
        	transition: all 5s;

        }
        div:hover{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
	</style>
</head>
<body>
	<div></div>
<!--
1.过渡连写格式
transition: 过渡属性 过渡时长 运动速度 延迟时间;

2.过渡连写注意点
2.1和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可
2.2连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素
2.3如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为
transition:all 0s;
-->
</body>
</html>

贵哥的编程之路(热爱分享)

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
transtion

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{ marg
复制链接

扫一扫