Question

我为同学编了一个简短的剧本，并认为我会展示一个很好的背景淡化，以使它看起来更好。我可以实现颜色变化，但不会从一个状态平滑过渡到下一个状态。我认为这会奏效，但也许我错了或错过了什么。

脚本中的其他所有内容都可以正常运行，如果您愿意，请继续使用。它只是导致屏幕停止，因此在执行任何其他操作之前可以显示错误或消息。

模板：

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

Answer 1

尝试在“#haltPage”的CSS定义中为时间值添加“s”：

    transition: background-color 1s linear .1s; 
    -webkit-transition: background-color 1s linear .1s;
    -o-transition: background-color 1s linear .1s;

背景颜色不褪色

1 个答案: