乐闻世界logo
搜索文章和话题

CSS 如何在页面加载时添加淡入效果？

CSS
1 年前提问
6 个月前修改
浏览次数110次

4个答案

1
2
3
4

CSS可以通过定义关键帧动画（@keyframes）来实现页面加载时的淡入效果。首先，你需要设置初始状态让元素透明度为0（即元素完全透明），然后随着时间的推移逐渐改变透明度至1（元素完全不透明）。这样就可以创建一个淡入效果，当页面加载时元素会逐渐显示。

以下是一个简单的示例：

css
/* 定义淡入效果的关键帧 */
@keyframes fadeIn {
    from {
        opacity: 0; /* 开始时透明度为0 */
    }
    to {
        opacity: 1; /* 结束时透明度为1 */
    }
}

/* 应用于页面元素 */
.element-to-fade-in {
    opacity: 0;      /* 初始透明度设置为0 */
    animation: fadeIn 2s ease-in forwards; /* 应用淡入效果，持续时间2秒，动画曲线为 ease-in，动画结束后保持最终状态 */
}

在上面的CSS中，.element-to-fade-in 类将被添加到需要淡入效果的HTML元素上。animation 属性指定了动画的名称 fadeIn，动画的持续时间（2s），动画时间函数（ease-in），以及一个 forwards 填充模式，表示动画完成后，元素将保持其最后一帧的样式。

当页面加载并且元素渲染时，动画会自然地开始，元素从完全透明慢慢变为完全不透明，从而达到淡入的效果。

为了确保元素在页面加载时立即开始动画，你可能需要将CSS添加到 <head> 标签中，或者使用内联样式。此外，确保没有其他CSS规则覆盖了你的淡入效果设置。

如果你的页面有很多元素需要应用淡入效果，你可以将这个类应用到所有这些元素上，或者如果它们共享一个父元素，你也可以将动画应用到父元素上，这样所有的子元素将会一同呈现淡入效果。

请注意，CSS动画的支持取决于浏览器的兼容性，但现代浏览器大多支持CSS3的关键帧动画。

2024年6月29日 12:07 回复

方法一：

如果您正在寻找自调用过渡，那么您应该使用CSS 3 Animations。它们也不受支持，但这正是它们的用途。

CSS

shell
#test p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

演示

浏览器支持

所有现代浏览器和 Internet Explorer 10（及更高版本）：http://caniuse.com/#feat=css-animation

方法二：

或者，您可以使用 jQuery（或纯 JavaScript；请参阅第三个代码块）来更改加载时的类：

jQuery

shell
$("#test p").addClass("load");​

CSS

shell
#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;

    -webkit-transition: opacity 2s ease-in;
       -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
}

#test p.load {
    opacity: 1;
}

纯 JavaScript（不在演示中）

shell
document.getElementById("test").children[0].className += " load";

演示

浏览器支持

所有现代浏览器和 Internet Explorer 10（及更高版本）：http://caniuse.com/#feat=css-transitions

方法三：

_或者，您可以使用.Mail_使用的方法：

jQuery

shell
$("#test p").delay(1000).animate({ opacity: 1 }, 700);​

CSS

shell
#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;
}

演示

浏览器支持

jQuery 1.x：所有现代浏览器和 Internet Explorer 6（及更高版本）： http: //jquery.com/browser-support/
jQuery 2.x：所有现代浏览器和 Internet Explorer 9（及更高版本）：http:// jquery.com/browser-support/

此方法最具交叉兼容性，因为目标浏览器不需要支持 CSS 3 过渡_或_动画。

2024年6月29日 12:07 回复

您可以使用onload=""HTML 属性并使用 JavaScript 来调整元素的不透明度样式。

按照您的建议保留 CSS。将 HTML 代码编辑为：

shell
<body onload="document.getElementById(test).style.opacity='1'">
    <div id="test">
        <p>​This is a test</p>
    </div>
</body>

这也可以在完成加载时淡入整个页面：

HTML：

shell
<body onload="document.body.style.opacity='1'">
</body>

CSS：

shell
body{ 
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s; /* Safari */
}

查看W3Schools网站：过渡和有关使用 JavaScript 更改样式的文章。

2024年6月29日 12:07 回复

回答 @AMK 关于如何在没有 jQuery 的情况下进行转换的问题。我整理了一个非常简单的例子。如果我有时间更多地思考这一点，我也许能够完全消除 JavaScript 代码：

shell
<style>
    body {
        background-color: red;
        transition: background-color 2s ease-in;
    }
</style>

<script>
    window.onload = function() {
        document.body.style.backgroundColor = '#00f';
    }
</script>

<body>
    <p>test</p>
</body>
2024年6月29日 12:07 回复

你的答案