显示指定秒数的 CSS 组件

showing a css component for a specified number of seconds

本文关键字：CSS 组件 显示      更新时间：2023-09-26

嗨，我正在编写一个名为弹出框的简单弹出窗口，我希望它只显示 10 秒，在此期间之后它将被隐藏，所以请怎么做任何想法

这是我的代码：

CSS代码：

/* Styles for game over popup */
   #popup {
font-family: 'Orbitron', serif;
font-size: 28px;
font-weight: 700;     
text-shadow: 0px 1px 2px #fff;
color: #222;
position: absolute;   
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,.5);
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;          
-webkit-transition: all .5s ease-in;}
    #popup h1 {
font-weight: 400;}
    #popup-box {
width: 400px;
height: 400px;
background: #ccc url(../images/popup_bg.jpg);
border-radius: 10px;
position: relative;
-webkit-box-shadow: 0 5px 5px #333;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-transition: all .5s ease-in;
    }
    #popup-box small {
font-size: .6em;
    }
      /***** Styles to hide the popup box ******/
    #popup.hide {
background: rgba(0,0,0,0);
visibility: hidden;     
       }
   #popup.hide #popup-box{
margin-top: -800px;
    }

网页代码 ：

        <section id="popup"  class="hide">
     <div id="popup-bg"></div>
     <div id="popup-box">
               Cards are laid out in a grid face down,
       and players take turns flipping pairs of cards over.
       On each turn, the player will first turn one card over, 
       then a second. If the two cards match, 
       the player scores one point,
       the two cards are removed from the game, 
       and the player gets another turn. 
       If they do not match, the cards are turned back over.

         </div>

   </section>

提前谢谢你

例如，使用jQuery可以通过以下方式完成：

$("#popup").fade​In(500, function​​​​​​​() {
    $(this).delay(10000).fadeOut(500)
})​;​

演示：http://jsfiddle.net/Q8xMk/

在 HTML 中的任何位置添加以下内容：

<script>
window.onload = function() {
    setTimeout(function() { document.getElementById("popup-box").style.display = "none" }, 10000);
}
</script>

setTimeout(f, t)基本上在 t 秒后调用函数f。由于它是在window.onload调用的，因此它在页面完全加载后几秒钟内执行此操作。

相关文章：