css-transition过渡效果

最新推荐文章于 2023-04-28 10:45:13 发布

河北颜良

最新推荐文章于 2023-04-28 10:45:13 发布

阅读量305

点赞数

文章标签： html5 html css css3

本文链接：https://blog.csdn.net/zhe06/article/details/105823454

版权

过渡效果 - transition
1.什么是过渡
使得CSS的属性值在一段时间内平缓变化的一个效果。
2.语法
1.指定过渡属性
作用：指定那个属性值在变化的时候使用过渡
属性：transition-property
取值：
1.属性名称
2.all
但凡能使用过渡效果的属性值在变化时一律都使用过渡来体现
允许使用过渡效果的属性：
1.所有与颜色相关的属性
2.所有取值为数字的属性。
ex:

	 案例
!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<style> 
div{
	width:100px;  **宽
	height:100px;  **高
	background:yellow;  **div颜色是黄色
	transition-property:height ;  **选择属性 
	}
div:hover{
	height:300px; **过渡效果  高增加300px
	background-color:red;  **过渡过程中变为红色
	}
</style>
</head>
<body>
<div>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果</div>
</body>
</html>

2.指定过渡时长
作用：指定在多长时间内完成过渡的效果
属性：transition-duration
取值： s 或 ms
1s = 1000ms
300ms = 0.3s
ex:
transition-duration:0.3s;

 案例
 大部分和上面一样，
!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<style> 
div{
	width:100px;  **宽
	height:100px;  **高
	background:yellow;  **div颜色是黄色
	transition-property:height ;  **选择属性 
	transition-duration: 2s;   **两秒
	}
div:hover{
	height:300px; **过渡效果  高增加300px
	background-color:red;  **过渡过程中变为红色
	}
</style>
</head>
<body>
<div>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果</div>
</body>
</html>

3.指定过渡的速度时间曲线函数
作用
属性：transition-timing-function
取值：
1.ease
默认值，慢速开始，快速变快，慢速结束。
2.linear
匀速
3.ease-in
由慢变快
4.ease-out
由快变慢
5.ease-in-out
慢快慢

<style> 和上面的案例一样，这里只用加这一点
div
{
width:100px;
height:100px;
background:yellow;
transition-property:height;
transition-duration: 5s;
transition-timing-function:ease-in;  **这里
}

div:hover
{
height:700px;
background-color:red;
}
</style>

指定过渡演示
作用：当激发过渡效果后，等待几秒在开始执行操作。
属性：transition-delay
取值：以s 或 ms为单位的数字

 案例
 大部分和上面一样，
!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<style> 
div{
	width:100px;
	height:100px;
	background:yellow;
	transition:height 5s; 这样写意思是，transition:选择属性 时间；（就是讲将transition-property和transition-duration 合在一起）
	transition-delay: 2s;
	}
div:hover{
	height:300px; **过渡效果  高增加300px
	background-color:red;  **过渡过程中变为红色
	}
</style>
</head>
<body>
<div>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果</div>
</body>
</html>

河北颜良

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-transition过渡效果

过渡效果 - transition1.什么是过渡使得CSS的属性值在一段时间内平缓变化的一个效果。2.语法1.指定过渡属性作用：指定那个属性值在变化的时候使用过渡属性：transition-property取值：1.属性名称2.all但凡能使用过渡效果的属性值在变化时一律都使用过渡来体现允许使用过渡效果的属性：1.所有与颜色相关的属性2.所有取值为数字的属性。ex: ...
复制链接

扫一扫