CSS 过渡可以在页面加载时创建淡入效果吗？

使用 CSS 过渡在页面加载时创建淡入效果

是否可以使用 CSS 过渡对文本进行淡入淡出效果当页面加载时？

要实现这种淡入效果，请合并以下 CSS 规则：

<h1 id="test-p">test p {</h1><p>margin-top: 25px;<br> font-size: 21px;<br> text-对齐：居中；<br> 不透明度：0；<br> 过渡：不透明度 2s escape-in​​;<br>}<br>

现在，要在加载时触发转换，您可以使用以下方法之一：

方法1：CSS动画（不广泛支持)

</p><h1 id="测试-p">测试 p {</h1><p>动画：淡入 2s;<br>}</p><p>@keyframes fadein {<br> 来自 { 不透明度：0; }<br> 至 { 不透明度：1; }<br>}<br>

方法 2：jQuery 或 JavaScript

在文档加载时执行以下 jQuery 脚本：

<br>$("#test p").addClass("load");<br>

使用相应的CSS：

</p><h1 id="测试-p">测试 p {</h1><p>过渡：不透明度 2 秒缓入；<br> 不透明度： 0;<br>}</p><h1 id="测试-p-load">测试 p.load {</h1><p>不透明度: 1;<br>}<br>

方法 3 : 使用 jQuery 的 Deferred动画

延迟触发动画并设置持续时间：

<br>$("#test p").delay(1000).animate({不透明度: 1 }, 700);<br>

请注意，不同的方法可能提供不同级别的跨浏览器兼容性，如所提供的响应中所述。

以上是CSS 过渡可以在页面加载时创建淡入效果吗？的详细内容。更多信息请关注PHP中文网其他相关文章！