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

代码

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元素上时元素隐藏,当鼠标离开盒子时元素显示。

运行效果

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例3-1 CSS3过渡_第1张图片
在CSS3之前,由于没有过渡属性transition,当修饰CSS样式时,CSS样式属性值就会瞬间变成修改后的值,此时CSS样式的变化是没有过渡效果的,这样会影响用户体验。通过CSS的过渡能够平滑地改变一个元素的CSS值,使元素从一个样式逐渐过渡到另一个样式,就很好的解决了这个问题。
利用transition能够实现元素显示、隐藏的过渡效果。
注意:元素的过渡效果开始于指定的CSS属性改变值时,CSS属性改变的典型时间是鼠标指针位于元素上或离开元素时;当鼠标光标移动到该元素时,该元素会逐渐改变它原有样式。

你可能感兴趣的:(前端,html5,css3)