使用 CSS 实现页面加载的淡入效果

原创于 2023-03-03 11:45:10 发布 · 261 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

博客围绕能否用CSS过渡让文本段落在页面加载时淡入展开，提到喜欢http://dotmailapp.com/上的类似效果，给出相关标记和CSS规则，还探讨了加载时触发转换的问题，并给出解答链接。

跳到主内容

可以使用 CSS 过渡让文本段落在页面加载时淡入吗？

我真的很喜欢它在http://dotmailapp.com/上的样子，并且很想使用 CSS 来使用类似的效果。该域名已被购买，不再具有提及的效果。可以在 Wayback Machine 上查看存档副本。

插图

有这个标记：

<div id="test">
    <p>This is a test</p>
</div>

使用以下 CSS 规则：

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}

如何在加载时触发转换？