使用 CSS 实现页面加载的淡入效果 [英] Using CSS for a fade-in effect on page load
问题描述
是否可以使用 CSS 过渡来允许文本段落在页面加载时淡入?
我真的很喜欢 http://dotmailapp.com/ 并希望使用 CSS 使用类似的效果.该域名已被购买，不再具有上述效果.可以在 Wayback Machine 上查看存档副本.
插图
有这个标记:
<p>这是一个测试</p></div>使用以下 CSS 规则:
#test p {不透明度:0；边距顶部:25px；字体大小:21px；文本对齐:居中；-webkit-transition:opacity 2s 缓入；-moz-transition:不透明度 2s 缓入；-o-transition:不透明度 2s 缓入；-ms-transition:不透明度 2s 缓入；过渡:不透明度 2 秒缓入；}
如何在加载时触发转换?
解决方案方法一:
如果您正在寻找自调用转换，那么您应该使用 CSS 3 动画.它们也不受支持，但这正是它们的用途.
CSS
#test p {边距顶部:25px；字体大小:21px；文本对齐:居中；-webkit-animation:淡入 2 秒；/* Safari、Chrome 和 Opera >12.1 */-moz-animation:淡入 2 秒；/* 火狐 <16 */-ms-animation:淡入 2 秒；/* IE浏览器 */-o-animation:淡入 2 秒；/* 歌剧 <12.1 */动画:淡入 2 秒；}@keyframes 淡入{从{不透明度:0;}{ 不透明度:1;}}/* 火狐 <16 */@-moz-keyframes 淡入{从{不透明度:0;}{ 不透明度:1;}}/* Safari、Chrome 和 Opera >12.1 */@-webkit-keyframes 淡入{从{不透明度:0;}{ 不透明度:1;}}/* IE浏览器 */@-ms-keyframes 淡入{从{不透明度:0;}{ 不透明度:1;}}/* 歌剧 <12.1 */@-o-keyframes 淡入{从{不透明度:0;}{ 不透明度:1;}}
演示
浏览器支持
所有现代浏览器和 Internet Explorer 10(及更高版本):http://caniuse.com/#feat=css-animation
方法 2:
或者，您可以使用 jQuery(或纯 JavaScript；请参阅第三个代码块)在加载时更改类:
jQuery
$("#test p").addClass("load");
CSS
#test p {不透明度:0；字体大小:21px；边距顶部:25px；文本对齐:居中；-webkit-transition:opacity 2s 缓入；-moz-transition:不透明度 2s 缓入；-ms-transition:不透明度 2s 缓入；-o-transition:不透明度 2s 缓入；过渡:不透明度 2 秒缓入；}#test p.load {不透明度:1；}
纯 JavaScript(不在演示中)
document.getElementById("test").children[0].className += "load";
演示
浏览器支持
所有现代浏览器和 Internet Explorer 10(及更高版本):http://caniuse.com/#feat=css-transitions
方法 3:
或者，您可以使用.Mail 使用的方法:
jQuery
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
CSS
#test p {不透明度:0；字体大小:21px；边距顶部:25px；文本对齐:居中；}
演示
浏览器支持
jQuery 1.x:所有现代浏览器和 Internet Explorer 6(及更高版本):http://jquery.com/browser-support/
jQuery 2.x:所有现代浏览器和 Internet Explorer 9(及更高版本):http://jquery.com/browser-support/
这种方法是最具交叉兼容性的，因为目标浏览器不需要支持 CSS 3 过渡或动画.
Can CSS transitions be used to allow a text paragraph to fade-in on page load?
I really like how it looked on http://dotmailapp.com/ and would love to use a similar effect using CSS. The domain has since been purchased and no longer has the effect mentioned. An archived copy can be viewed on the Wayback Machine.
Illustration
Having this markup:
<div id="test">
<p>This is a test</p>
</div>
With the following CSS rule:
#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;
}
How can the transition be triggered on load?
解决方案 Method 1:
If you are looking for a self-invoking transition then you should use CSS 3 Animations. They aren't supported either, but this is exactly the kind of thing they were made for.
CSS
#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; }
}
Demo
Browser Support
All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-animation
Method 2:
Alternatively, you can use jQuery (or plain JavaScript; see the third code block) to change the class on load:
jQuery
$("#test p").addClass("load");
CSS
#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;
}
Plain JavaScript (not in the demo)
document.getElementById("test").children[0].className += " load";
Demo
Browser Support
All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-transitions
Method 3:
Or, you can use the method that .Mail uses:
jQuery
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
CSS
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
Demo
Browser Support
jQuery 1.x: All modern browsers and Internet Explorer 6 (and later): http://jquery.com/browser-support/
jQuery 2.x: All modern browsers and Internet Explorer 9 (and later): http://jquery.com/browser-support/
This method is the most cross-compatible as the target browser does not need to support CSS 3 transitions or animations.
这篇关于使用 CSS 实现页面加载的淡入效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
