在按鍵上添加背景顏色並淡出javascript

在按鍵輸入時，我想添加一個紅色，立即淡出以創建眨眼效果。在按鍵上添加背景顏色並淡出javascript

我試過按鍵時，將轉換不透明度爲0添加一個新的類：

function enterpressalert(e, text) { 
 
    var code = (e.keyCode ? e.keyCode : e.which); 
 
    if (code == 13) { 
 
    document.getElementById('body').className = "show"; 
 
    } 
 
}

#body { 
 
     background-color: rgb(175, 30, 30); 
 
     opacity: .25; 
 
     transition: opacity 0.4s ease-in; 
 
     -ms-transition: opacity 0.4s ease-in; 
 
     -moz-transition: opacity 0.4s ease-in; 
 
     -webkit-transition: opacity 0.4s ease-in; 
 
    } 
 

 
    #body.show { 
 
     opacity: 0; 
 
     transition: opacity 0.4s ease-out; 
 
     -ms-transition: opacity 0.4s ease-out; 
 
     -moz-transition: opacity 0.4s ease-out; 
 
     -webkit-transition: opacity 0.4s ease-out; 
 
    }

<body id="body" onKeyPress="enterpressalert(event, this)></body>

來源

2016-01-02 Siunami

問題沒有一個明確的**問題說明**是非有用的其他讀者 – Amit

'keypress'處理程序未分配正確編輯。 '''在這裏丟失 - >'' – Rayon

可以閃爍的顏色像下面的方式。無需使用opacity使用background-color: rgba(

body.onkeydown = checkKey; 
 

 
function checkKey(e) { 
 
e = e || window.event; 
 
    
 
if (e.keyCode == 13) { 
 
    document.getElementById('body').className = "show"; 
 
    var myVar = setInterval(function(){ document.getElementById('body').className = ""; clearInterval(myVar);}, 500); 
 
    
 
    } 
 
}

#body { 
 
     background-color: rgba(175, 30, 30,1); 
 
     opacity: 1; 
 
     transition: all 0.4s ease-in; 
 
     -ms-transition: all 0.4s ease-in; 
 
     -moz-transition: all 0.4s ease-in; 
 
     -webkit-transition: all 0.4s ease-in; 
 
     
 
    } 
 

 
    #body.show { 
 
    background-color: rgba(175, 30, 30,0); 
 
     transition: all 0.4s ease-out; 
 
     -ms-transition: all 0.4s ease-out; 
 
     -moz-transition: all 0.4s ease-out; 
 
     -webkit-transition: all 0.4s ease-out; 
 
    }

<body id="body" > 
 
</body>

來源

2016-01-02 08:48:41 ketan

這裏：

function enterpressalert(event, text) { 
 
    var code = event.keyCode || event.which; 
 
    if (code == 13) { 
 
    document.getElementById('body').style.animationName = "alert"; 
 
    setTimeout(function() { 
 
     document.getElementById('body').id = "bodyB"; 
 
     setTimeout(function() { 
 
     document.getElementById('bodyB').id = "body"; 
 
     document.getElementById('body').style.animationName = "nothing";  
 
     }, 4000); 
 
    }, 100); 
 
    } 
 
}

#body { 
 
     background-color: rgb(175, 30, 30); 
 
     opacity: .25; 
 
     animation-name: nothing; 
 
     animation-duration: 0.1s; 
 
    } 
 

 
    #bodyB { 
 
     background-color: yellow; 
 
     opacity: .25; 
 
     animation-name: phase2; 
 
     animation-duration: 4s;  
 
    } 
 

 
    @keyframes alert { 
 
     from {background-color: yellow} 
 
     to {background-color: rgb(175, 30, 30);;} 
 
    } 
 

 
    @keyframes phase2 { 
 
     from {background-color: yellow;} 
 
     to {background-color: rgb(175, 30, 30);} 
 
    }

<body id="body" onkeypress="enterpressalert(event, 'TEXT?')"> 
 
    
 
    </body>

來源

2016-01-02 09:04:10

在按鍵上添加背景顏色並淡出javascript

回答

相關問題