html - 如何让div显示:none after a css animation that makes it fade away?

Question

我的网站上出现了癫痫警告，然后逐渐消失，揭示出这是一场噩梦。遗憾的是，在它消失后，您无法单击任何输入字段，因为动画后 div 未显示:无。这是css3动画代码:

#warning{
    background-color:Silver;
    width:100%;
    height:100%;
    position:absolute;
    z-index:2;
    -webkit-animation: warning 6s ease-out forwards;
}
@-webkit-keyframes warning {
    0%  {background-color:Silver;opacity:1;z-index:2;}
    80% {opacity:1;z-index:2;}
    100%{opacity:0;z-index:0;}
}

那么我怎样才能点击输入字段呢？

Answer 1

您可以尝试将 pointer-events:none; 添加到 #warning{。他们仍然可以在覆盖层向上的情况下点击某些内容(即使他们看不到它们)。

这是一个例子:

#warning{
    background-color:Silver;
    width:100%;
    height:100%;
    left: 0;
    position:absolute;
    pointer-events: none; /* The new addition */
    top: 0;
    z-index:2;
    -webkit-animation: warning 6s ease-out forwards;
}
@-webkit-keyframes warning {
    0%  {background-color:Silver;opacity:1;z-index:2;}
    80% {opacity:1;z-index:2;}
    100%{opacity:0;z-index:0;}
}

<button onclick="alert('clicked')">Click Me!!!</button>
<div id="warning">Warning!!!!!!</div>

编辑

或者，您可以将动画的 z-index 设置为 -1。

#warning{
    background-color:Silver;
    width:100%;
    height:100%;
    left: 0;
    position:absolute;
    top: 0;
    z-index:2;
    -webkit-animation: warning 6s ease-out forwards;
}
@-webkit-keyframes warning {
    0%  {background-color:Silver;opacity:1;z-index:2;}
    80% {opacity:1;z-index:2;}
    100%{opacity:0;z-index:-1;} /* Change Made */

<button onclick="alert('clicked')">Click Me!!!</button>
<div id="warning">Warning!!!!!!</div>

这完全取决于您显然想要做什么。