在页面加载时使用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; }​ 

如何在加载时触发转换?

方法1:

如果你正在寻找一个自我调用的过渡,那么你应该使用CSS3动画 ,它们也不被支持,但这正是他们所做的事情。

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; } } 

演示

浏览器支持

所有现代浏览器,IE 10+: http : //caniuse.com/#feat=css-animation

方法2:

或者,您可以使用jQuery(或普通的JS,请参阅第三个代码块)来更改加载的类:

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; } 

平原JS(不在演示中)

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

演示

浏览器支持

所有现代浏览器,IE 10+: http : //caniuse.com/#feat=css-transitions

方法3:

或者,您可以使用.Mail使用的方法:

jQuery的

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

CSS

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

演示

浏览器支持

jQuery 1.x :所有现代浏览器,IE 6+: http : //jquery.com/browser-support/
jQuery 2.x :所有现代浏览器,IE 9+: http : //jquery.com/browser-support/

由于目标浏览器不需要支持CSS3转换动画,因此该方法是最具交叉兼容性的。

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

按照你的建议离开你的CSS。 编辑您的HTML代码来:

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

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

HTML:

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

CSS:

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

检查W3Schools网站: 转换和一篇文章用javascript改变样式 。

回应@ AMK关于如何在没有jQuery的情况下进行转换的问题。 我扔了一个非常简单的例子。 如果我有时间思考这个问题,我可能会完全消除这个javascript:

 <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>