作用:
让元素样式慢慢变化,常配合hover使用,增强网页交互体验。
参数 | 取值 |
---|---|
过渡的属性 | ⑴all:过渡所有能过渡的属性。 ⑵具体属性名,例子详见下 |
过渡的时长 | 数字+s(秒)/ms(毫秒) |
例子:
实现效果:鼠标放到div盒子上后,盒子的width和background-color改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:300px;
height: 300px;
background-color: red;
/* 声明修改width和background-color属性,变化时间分别为一秒和两秒 */
transition:width 1s ,background-color 2s;
}
/*设置div的hover伪类选择器,声明鼠标悬停后的width和background-color的值 */
div:hover{
width: 600px;
background-color: gray;
}
</style>
</head>
<body>
<div>
hello world
</div>
</body>
</html>
由效果图可知,将鼠标移入和移出时均有过渡效果。
但是如果将 transition:width 1s ,background-color 2s; 这一句代码加到hover选择器中,那么鼠标移入时有过渡效果,移出时没有。
注意&总结:
1.想让哪个属性改变就给谁加transition;
2.transition属性设置在不同状态中,效果不同:
给默认状态设置,鼠标移入移出都有过渡效果
给hover状态设置,鼠标移入有过渡效果,移出设有过渡效果