代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 过渡</title>
<style>
/*显示*/
.box {
width: 100px;
height: 100px;
background-color: #eee;
/*透明度*/
opacity: 1;
/*过渡*/
transition: 3s;
}
/*隐藏*/
.box:hover {
opacity: 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
上述代码中：
第8-16行代码定义.box的样式，设置透明度为1，transition的值为3s；
第18~20行代码定义元素的透明度为0，表示当鼠标指针悬停在.box元素上时元素隐藏，当鼠标离开盒子时元素显示。
运行效果
在CSS3之前，由于没有过渡属性transition，当修饰CSS样式时，CSS样式属性值就会瞬间变成修改后的值，此时CSS样式的变化是没有过渡效果的，这样会影响用户体验。通过CSS的过渡能够平滑地改变一个元素的CSS值，使元素从一个样式逐渐过渡到另一个样式，就很好的解决了这个问题。
利用transition能够实现元素显示、隐藏的过渡效果。
注意：元素的过渡效果开始于指定的CSS属性改变值时，CSS属性改变的典型时间是鼠标指针位于元素上或离开元素时；当鼠标光标移动到该元素时，该元素会逐渐改变它原有样式。
1348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
