CSS3提供了强大的过渡属性
它可以在不使用JavaScript脚本的情况下，为元素从一种样式转变为另一种样式时添加效果。如动画快慢，渐显，渐弱等。下文主要讲解transition-property属性。
| 属性值 | 描述 |
|---|---|
| none | 没有属性获得过渡效果 |
| all | 所有属性会获得过渡效果 |
| property | 定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔 |
具体代码片段如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{
width: 400px;
height: 100px;
background-color: red;
font-weight: bold;
color: #333333;
}
div:hover{
background-color: blue;
-webkit-transition-property: background-color;/*Safari and Chrome浏览器兼容代码*/
-moz-transition-property: background-color;/*Firefox浏览器兼容代码*/
}
</style>
<body>
<div>使用transition-property属性更改元素背景颜色</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
