响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版例3-1 CSS3过渡

news2024/11/18 5:44:24

代码

<!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属性改变的典型时间是鼠标指针位于元素上或离开元素时；当鼠标光标移动到该元素时，该元素会逐渐改变它原有样式。