使用 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;
}​

如何在加载时触发转换？

 

解答http://www.stackoverflow.ink/posts/shi-yong-css-shi-xian-ye-mian-jia-zai-de-dan-ru-xiao-guo/?f=2​​​​​​​