使用 CSS 实现淡出过渡

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

使用 CSS 实现淡出过渡

作者：迹忆客最近更新：2023/04/27 浏览次数：

在本文中，我们将了解淡出动画以及如何使用内部、外部和内联 CSS 来实现它。稍后，我们将看看如何使用 DOM 事件来实现淡出功能。

CSS 淡入淡出过渡

CSS 淡入淡出过渡是一种视觉效果，其中图像、文本或背景等元素在页面上逐渐出现或消失。

CSS 过渡属性或动画属性将用于产生这些效果。使用 transition 属性，您只能指定起始和最终状态。

CSS 过渡和动画之间的区别在于过渡需要触发，例如用户将鼠标悬停在元素上，而动画则不需要。当页面加载时，动画的默认行为会立即开始其序列。

但是，您可以使用 animation-delay 参数延迟它。本文仅关注 FadeOut。

让我们看看如何使用 CSS 实现淡出过渡。

使用动画属性淡出

如上所述，淡出功能可以通过 CSS 的过渡和动画属性来实现。让我们从使用动画属性创建功能开始。

代码：

<html>
    <head>
        <style>
            .fade {
            animation: fadeOut 5s;
         }

         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }
        </style>
    </head>
    <body>
        <div class="fade"> Internal CSS Fade Out using Animation !</div>
    </body>
</html>

首先，我们为 div 分配一个类 fade。所有的样式都将在这个类中完成。

我们现在正朝着风格标签前进。我们在类中调用的第一个属性是动画：fadeOut 5s，这个属性允许您在网页上制作有创意的动画。

fadeOut 是动画名称，5s 是动画持续时间，它定义了动画完成一个循环所需的持续时间。然后我们在动画名称 fadeOut 上使用关键帧。

关键帧用于确定动画规则。我们指定在 0% 时，元素的不透明度/透明度为 1，这意味着 100%，因为 CSS 的不透明度属性的值范围为 0 到 1，不透明度在 100% 时将为 0，这意味着文本将以完全可见的方式出现并慢慢淡出。

使用过渡属性淡出

让我们使用 CSS 的过渡属性来实现该功能。 transition 属性需要像 hover、focus 等触发函数才能工作。

代码：

<html>
    <head>
        <style>
            .fadeOut:hover {
                opacity: 10%;
                transition: opacity 3s;
            }
         }
        </style>
    </head>
    <body>
        <div class="fadeOut"> Internal CSS Fade Out using Transition !</div>
    </body>
</html>

在上面的代码中，我们写了 transition: opacity 3s 。过渡的第一个子属性是过渡属性，它指定应应用过渡的 CSS 属性的名称。

第二个子属性是过渡持续时间，它指定过渡应该发生的持续时间。所以，我们只是说当用户将光标放在文本上时，文本的不透明度应该在给定的持续时间内变为 10%。

使用内联 CSS 淡出

内联 CSS 为标签内的 HTML 元素提供样式。不推荐使用内联 CSS，因为我们不能使用 HTML 标签内的所有属性。

代码：

<html>
    <head>
        <style>
         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }
        </style>
    </head>
    <body>
        <div class="fade" style="animation: fadeOut 5s"> In-line CSS Fade Out !</div>
    </body>
</html>

由于我们使用内联 CSS 编写代码，这里的问题可能是为什么我们没有在 div 标签内编写关键帧。因为关键帧不是 HTML 元素的一部分，所以它们在动画中被调用。

使用外部 CSS 淡出

外部样式表是在扩展名为 .css 的独立文件中创建的。外部样式表是一个 CSS 规则列表，其中不能使用 HTML 标签。

外部样式表可以通过 link 标签链接，该标签位于 HTML 页面的 head 标签中。单个 HTML 页面可以使用任意多的外部样式表。

例如，创建一个名为 style.css 或任何您想要的名称的文件，并将上述示例中的样式标签代码复制到该文件中。我们需要将 CSS 文件引用添加到我们的 HTML 页面。

代码：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="fade">External CSS Fade Out !</div>
    </body>
</html>

使用 Dom 事件淡出

实现淡出功能的另一种方法是使用 DOM onMouseOver 和 onMouseOut 事件。 onMouseOver 事件在鼠标指针移到元素上时触发，而 onMouseOut 事件在鼠标移离元素时发生。

代码：

<html>
    <head></head>
    <body>
        <div class="fadeOut" onMouseOver="this.style.opacity='10%'"onMouseOut="this.style.opacity='100%'">
            I will fade out on mouse hover
        </div>
    </body>
</html>