CSS3过渡transition效果实例介绍

下面是关于“CSS3过渡transition效果实例介绍”的完整攻略。

基本介绍

CSS3过渡（transition）在前端页面开发中常用于实现动画效果，通过在某些属性值发生变化时，过渡到新属性值从而呈现出平滑的动画效果。通常情况下，我们会使用transition property指明需要过渡的属性、 transition duration指明过渡的时间长度、transition timing-function指明过渡的时间函数以及transition delay指明过渡开始的延迟时间。

过渡实例1

下面是一个简单的示例代码，当鼠标悬浮到一个元素上时，元素的背景色从白色过渡到黑色，并缓慢消失。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>过渡示例1</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: white;
            transition: background-color 3s ease-in-out;
        }
        div:hover {
            background-color: black;
            opacity: 0;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

代码中 div 中的 background-color 属性被设置为 white，由于 transition 属性的存在，当鼠标悬浮在 div 上时， div 会缓慢的过渡到黑色并在 3 秒钟内消失。其工作原理是当鼠标悬停在 div 上时，添加了一个 hover 伪类，使背景颜色被改为黑色并且透明度发生变化。

过渡实例2

下面是另一个简单示例，这是一个使用了一个加了transition效果的按钮，当用户单击该按钮时，会用一个平滑的过渡效果隐藏该按钮。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>过渡示例2</title>
    <style>
        button {
            padding: 10px;
            background-color: #8BC34A;
            color: white;
            border: none;
            transition: opacity 0.5s ease-in-out;
        }

        button:hover {
            opacity: 0;
        }
    </style>
</head>
<body>
    <button>点击我</button>
</body>
</html>

代码中，按钮的 opacity 实现了不透明度的渐变，从 1 （完全不透明）到 0 （完全透明）进行过渡。当按钮被点击时，鼠标悬浮于上方，按钮开始过渡，通过设置 opacity 的数值从 1 逐渐变为 0 消失。

以上就是关于“CSS3过渡transition效果实例介绍”的完整攻略，希望对你有帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS3过渡transition效果实例介绍 - Python技术站

CSS3过渡transition效果实例介绍

基本介绍

过渡实例1

过渡实例2

相关文章