srcminiCSS过渡是添加的效果, 用于在不使用Flash或JavaScript的情况下将元素从一种样式逐渐更改为另一种样式。
你应该指定两件事来创建CSS过渡。
- 要在其上添加效果的CSS属性。
- 效果的持续时间。
让我们来看一个示例, 该示例定义对width属性和3秒持续时间的过渡效果。
注意：如果不指定持续时间部分, 则过渡将不起作用, 因为其默认值为0。当将光标移到元素上时, 过渡效果将开始。
注意：IE9和更早版本不支持transition属性。
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px;
height: 100px;
background: orange;
-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div></div>
<p>Move the cursor over the div element above, to see the transition effect.</p>
</body>
</html>注意：将鼠标光标从元素中移出时, 它将逐渐获得其原始样式。
CSS多重过渡效果
它用于为多个CSS属性添加过渡效果。如果要对多个属性添加过渡效果, 请用逗号分隔这些属性。
让我们举个例子。在此, 过渡对宽度, 高度和变换产生影响。
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:15px;
width: 150px;
height: 100px;
background: violet;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 200px;
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
</style>
</head>
<body>
<div><b>srcmini02.com</b><p> (Move your cursor on me to see the effect)</p></div>
</body>
</html>
评论前必须登录！
注册