我们可以使用CSS3来创建过渡效果,但是我们必须指定两个值,即更改CSS属性和效果的持续时间。
过渡属性如下所示:
- transition - 用于设置四个转换属性的简写属性
- transition-delay - 指定过渡效果何时开始
- transition-duration - 指定完成转换所需的秒数或毫秒数
- transition-property - 指定转换所用的CSS属性的名称
- transition-timing-function - 指定转换的速度曲线
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 250px;
height: 100px;
background: aqua;
transition: width 2s, height 2s;
text-align: center;
}
div:hover {
width: 500px;
height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div>Gt:Click on me to see the effect</div>
</body>
</html>
实现效果如下所示: