我为一位同学写了一个简短的脚本，我想我会展示一个漂亮的背景和渐变，让它看起来更好。我可以实现颜色的变化，但它不会从一种状态平滑地过渡到下一种状态。我以为这会奏效，但也许我错了，或者错过了什么。
脚本中的所有其他内容都有效，所以如果您愿意，请继续使用。它所做的只是导致屏幕暂停，以便在执行其他操作之前显示错误或消息。
模板：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Message Expansion Demonstration</title>
<style>
body {
margin:0 auto;
padding:0 0;
height:100%;
width:100%;
text-align:center; }
#haltPage {
display:none;
position:absolute;
height:100%;
width:100%;
top:0px;
background-color:rgba(0, 0, 0, 0.0);
transition: background-color 1s linear .1;
-webkit-transition: background-color 1s linear .1;
-o-transition: background-color 1s linear .1;
z-index=9999;
}
.wrong {
position:relative;
padding:auto auto;
margin:auto auto;
height:250px;
width:400px;
background-color:#666;
border-bottom-left-radius:0.5em 0.5em;
border-bottom-right-radius:0.5em 0.5em;
border-top-left-radius:0.5em 0.5em;
border-top-right-radius:0.5em 0.5em;
box-shadow:5px 10px 25px #000; }
.wrong p {
padding:10px; }
</style>
<script>
function wrong ( classID )
{
var on = 'block';
var visable = 'rgba(0, 0, 0, 0.4)';
clearClass ( );
document.getElementById('haltPage').style.display = on;
document.getElementById('haltPage').style.backgroundColor = visable;
document.getElementById(classID).style.display = on;
}
function clearClass ( )
{
var off = 'none';
document.getElementById('haltPage').style.display = off;
document.getElementById('wrong1').style.display = off;
document.getElementById('wrong2').style.display = off;
document.getElementById('wrong3').style.display = off;
}
</script>
</head>
<body>
<a href="#" onClick="wrong('wrong1')">Wrong Answer One</a><br><br>
<a href="#" onClick="wrong('wrong2')">Wrong Answer Two</a><br><br>
<a href="#" onClick="wrong('wrong3')">Wrong Answer Three</a><br><br>
<!-- This is not seen untill called -->
<div id="haltPage">
<br><br><br>
<div id="wrong1" class="wrong">
<h1>Wrong!</h1>
<p>You are wrong!<br><a href="#" onClick="clearClass();">Close</a></p>
</div>
<div id="wrong2" class="wrong">
<h1>Wrong!</h1>
<p>You are wronger! < Not a word<br><a href="#" onClick="clearClass();">Close</a></p>
</div>
<div id="wrong3" class="wrong">
<h1>Wrong!</h1>
<p>You are wrongest! < duh<br><a href="#" onClick="clearClass()">Close</a></p>
</div>
</div>
</body>
</html>
尝试在"#haltPage"的CSS定义中的时间值后面添加一个"s"：
transition: background-color 1s linear .1s;
-webkit-transition: background-color 1s linear .1s;
-o-transition: background-color 1s linear .1s;