css3标志属性之一的transition,可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。 比如,我们在点击某个盒子,让其宽度增长100%;代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hover宽度增长</title>
<style>
div{
width: 100px;
height: 50px;
background-color: #f00;
}
div:hover{
width: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
很简单的几句代码,就是鼠标悬浮在div上时,宽度瞬间增长到200px,请注意
瞬间
这个词,说明我们在悬浮在盒子上时,宽度会马上增加,基本上肉眼是无法观察到这个变化过程,只能看到最终的结果。因此就引出了css3中transition这个属性。该属性的用法如下:
- transition-property 变化的属性
- transition-duration 变化所需的时间
- transition-timing-function 过渡曲线
- transition-delay 过渡开始延迟时间
连写格式:transition:属性 时间 曲线 延迟;
还是用之前的例子说明:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hover宽度增长</title>
<style>
div{
width: 100px;
height: 50px;
background-color: #f00;
transition:width 2s linear 0.5s;//宽度变化 过渡时间2s 匀速运动 延迟0.5s
}
div:hover{
width: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
最后总结过渡三部曲:
1.有属性发生变化
2.确定是哪个属性的元素发生了变化
3.在该元素的css样式中添加transition过渡效果。
12.13补充:
transition属性的值可以只有两个,变化的属性和过渡的时间。如果有多个属性发生变化,则可以用连写方式:
transition:值1 时间,值2 时间。
如果两个值的时间相同,比如宽高变化时间都是1s,那么可以直接写为transition:all 1s;
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hover宽度增长</title>
<style>
div{
width: 100px;
height: 50px;
background-color: #f00;
/*transition:width 2s,height 2s;*/
transition:all 2s;
}
div:hover{
width: 200px;
height:300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>