迹忆客 专注技术分享

淡入效果将元素的不透明度从隐藏增加到可见。选定元素的不透明度将在给定时间内发生变化。

本教程将介绍在 CSS 中加载页面时实现这种效果的方法。

我们对淡入效果有了一些了解。

此方法将使用 animation 属性和 @keyframes 规则在页面加载时实现淡入效果。首先，让我们了解 animation 属性是如何工作的。

当一个元素的样式及时从一种样式更改为另一种样式时，我们可以判断它是一个动画。animation 属性是 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count 和 animation-方向按顺序。

我们可以使用 animation 属性仅指定 animation-name 和 animation-duration 属性来创建淡入效果。 @keyframes 规则用于逐渐改变所选元素的 CSS 样式。

结果，将创建动画效果。我们使用 @keyframes 规则中的 animation-name 属性值来选择动画以应用渐变样式。

在@keyframes 规则中，我们使用 to 和 from 等选择器来应用样式。to 和 from 选择器等价于 0% 和 100%。

使用 to 选择器应用的样式将逐渐更改为使用 from 选择器应用的样式。更改将与 animation-duration 属性指定的时间一起发生。

要创建淡入动画，我们可以使用 @keyframes 规则中的选择器将页面的不透明度从 0 更改为 1。@keyframe 规则的语法如下所示。

@keyframes animation-name {
    keyframes-selector {
        css-styles;
    }
}

例如，在 HTML 的 p 标签内写一些文本。

在 CSS 中，选择 html 标签并将 animation 属性设置为 fadein 2s。这里，fadein 是 animation-name，2s 是 animation-duration。

接下来，使用@keyframes 关键字选择动画名称 fadein，如上面的语法所示。将 0%写为第一个关键帧选择器并将 opacity 属性设置为 0。

同样，将另外两个关键帧选择器写为 50%和 100%，并将 opacity 分别设置为 0.5 和 1。

在这里，当页面加载时，由于不透明度设置为 0，文本一开始会不太明显。逐渐地，不透明度会改变，文本将在两秒钟内显示出来。

因此，我们可以使用 animation 属性来创建淡入效果。

示例代码：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

body {
    animation: fadein 4s; 
}
@keyframes fadein {
    0% {
        opacity:0;
    }
    50%{
        opacity:0.5;
    }
    100% {
        opacity:1;
    }
}

这个方法将讨论另一种使用 jQuery 在 CSS 中创建淡入效果的方法。

我们可以使用 jQuery 中的 animate() 方法来实现我们的目标。animate() 执行所选元素样式的渐变以创建动画效果。

我们可以指定 CSS 样式并提供动画的速度。animate() 方法的语法如下所示。

(selector).animate({css-styles}, duration, easing, callback)

当我们使用 animate() 方法时，所选元素的默认样式将被方法中指定的样式覆盖。

出于演示目的，我们将在 HTML 中使用与第一种方法相同的文本。首先，选择 CSS 的 body 标签并将 opacity 属性设置为 0。

接下来，在 jQuery 中选择 body 标签并调用 animate() 方法。在方法内部，将样式中的 opacity 设置为 1，并将 duration 设置为 2000。

在下面的示例中，2000 等于两秒，即动画的持续时间。最初，当页面加载时，其不透明度为 0，并在两秒内变为 1。

这样，使用 jQuery 就实现了淡入效果。

示例代码：

body {
    opacity: 0;
}

$("body").animate({"opacity": "1"}, 2000);

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>