基本HTML文档中CSS颜色的变化
基本HTML文档中CSS颜色的变化
提问于 2015-10-03 16:59:07
考虑以下代码：
<html>
<head>
<style>
body {
background-color: #CCC;
}
.con {
background-color: #FFF;
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="con">
[SITE CONTENT]
</div>
</body>
</html>我试图实现的是有白色的内容背景，这采取80%的屏幕宽度，并将在中心。
身体背景(10%右和10%左)将是灰色的。(中心的80%将被白色背景的内容div占用)。
它很好用。但大多数情况下，当页面加载时(大多是当网络速度慢时)，最初内容也会出现在灰色背景中，然后变成白色。
避免这种过渡效应的最佳方法是什么？
我现正考虑下列方案：
最后用js改变身体的颜色。 b.在css中，主体的背景色也是白色的，然后在文档的末尾，覆盖css并使其变为灰色。
但我相信有更好的解决办法。请帮帮忙。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-10-03 17:24:47
您可以在不使用jQuery的情况下尝试这样的方法：
在display: none;中设置html。然后，当您的页面被加载时，更改到display: block;以显示html内容。
setTimeout(function() {
var html = document.querySelector("html");
html.setAttribute("style", "display: block");
}, 1000);html {
display: none;
}
body {
background-color: #CCC;
}
.con {
background-color: #FFF;
width: 80%;
margin: 0 auto;
}<body>
<div class="con">[SITE CONTENT]</div>
</body>
另一种方法是使用jQuery库：
$(function() // When the DOM is ready.
{
$("html").css({
"display": "block"
});
});html {
display: none;
}
body {
background-color: #CCC;
}
.con {
background-color: #FFF;
width: 80%;
margin: 0 auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="con">[SITE CONTENT]</div>
</body>
希望这能帮到你。
Stack Overflow用户
发布于 2015-10-03 17:47:11
那这个呢？给A.M.K的学分
body {
-moz-animation: fadein 4s;
/* Firefox */
-webkit-animation: fadein 4s;
/* Safari and Chrome */
-o-animation: fadein 4s;
/* Opera */
background-color: #ccc;
}
@keyframes fadein {
from {
background-color: #fff;
}
to {
background-color: #ccc;
;
}
}
@-moz-keyframes fadein {
/* Firefox */
from {
background-color: #fff;
}
to {
background-color: #ccc;
;
}
}
@-webkit-keyframes fadein {
/* Safari and Chrome */
from {
background-color: #fff;
}
to {
background-color: #ccc;
;
}
}
@-o-keyframes fadein {
/* Opera */
from {
background-color: #fff;
}
to {
background-color: #ccc;
;
}
}
.con {
background-color: #FFF;
width: 80%;
margin: 0 auto;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32925126
复制相关文章
相似问题
腾讯云开发者
