想要一段時間後彈出

Question

我想要一個關閉按鈕的彈出框。 5秒後和完全加載頁面後將顯示。

是否有任何CSS技巧？ 請不要使用其他語言，如JAVASCRIPT，JQUERY。等

Answer 1

你可以試試這個

.container { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background: lightblue; 
 
    position: relative; 
 
} 
 

 
.popup { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 200px; 
 
    height: 200px; 
 
    background: white; 
 
    opacity: 0; 
 
    animation: popup .5s 5s ease forwards; 
 
} 
 
@keyframes popup { 
 
from {opacity: 0; } 
 
to{opacity: 1; } 
 
}

<div class="container"> 
 
    <div class="popup">Popup</div> 
 
</div>

Answer 2

我真的不知道這是否會適用於你或不

但不知何故，一個人在那裏被要求幾乎相同（但不同的上下文中）的情況下。你可以嘗試檢查this

注：如果我錯了糾正我

Answer 3

它只能與CSS，採用動畫和複選框來完成hack

我建議你將來嘗試自己做，至少要發佈你已經嘗試過或者一些示例代碼。這不是一個代碼製作網站。我們幫助您找到解決方案，但我們需要看到您嘗試了一些方法。

無論如何，我有一些空閒時間，並想幫助你。但是這不會經常發生在SO

所以它就是這樣。使用silibing選擇（+， - ），CSS動畫和複選框，點擊黑客

見下

body { 
 
    margin: 0 
 
} 
 

 
input:checked, 
 
input:checked + .popMe, 
 
input:checked ~ .overlay { 
 
    display: none; 
 
} 
 

 
input { 
 
    position: fixed; 
 
    right: 15px; 
 
    top:30%; 
 
    opacity: 0; 
 
    animation-name: justopac; 
 
    animation-delay: 1s; 
 
    animation-duration: 0.3s; 
 
    animation-fill-mode: forwards; 
 
    animation-timing-function: ease-out; 
 
    z-index: 2; 
 
} 
 

 
.popMe { 
 
    height: 150px; 
 
    width: 150px; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: scale(0) translate(-50%, -50%); 
 
    position: fixed; 
 
    background: red; 
 
    animation-name: popMe; 
 
    animation-delay: 1s; 
 
    animation-duration: 0.3s; 
 
    animation-fill-mode: forwards; 
 
    animation-timing-function: ease-out; 
 
    transform-origin: left; 
 
    z-index: 2; 
 
} 
 

 
.overlay { 
 
    position: fixed; 
 
    animation-name: justopac; 
 
    animation-delay: 1s; 
 
    animation-duration: 0.3s; 
 
    animation-fill-mode: forwards; 
 
    animation-timing-function: ease-out; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    opacity: 0; 
 
} 
 

 
@keyframes justopac { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
} 
 

 
@keyframes popMe { 
 
    0% { 
 
    transform: scale(0) translate(-50%, -50%); 
 
    } 
 
    100% { 
 
    transform: scale(1) translate(-50%, -50%); 
 
    } 
 
}

<input type="checkbox"> 
 
<div class="popMe"> 
 
    <p> 
 
    This is a popup 
 
    </p> 
 
</div> 
 
<div class="overlay"> 
 

 
</div> 
 

 
<div class="content"> 
 
    Lorem ipsum dolor sit amet, curabitur eu a duis vitae odio, ac consectetuer conubia at, donec ante aliquam at, placerat neque leo, ac turpis accumsan. Aenean viverra pellentesque aliquet, tincidunt dolor consequat lorem dolorum mauris, amet bibendum sed 
 
    lacus, sapien duis nullam. Pellentesque nunc laoreet id egestas integer ac. Proin dis tristique sodales mollis incididunt. Est phasellus elit libero, fermentum suspendisse enim convallis mauris sed vulputate, ac aliquam integer quis consectetuer pellentesque, 
 
    wisi urna velit pharetra pellentesque, dictum velit nec metus vitae. Neque tincidunt nec, eu et ligula etiam sit aliquam wisi. Cupiditate scelerisque ipsum pellentesque maecenas quam, ipsum nec augue suscipit, tincidunt mi ac ut risus urna tristique. 
 
    Fermentum vel eros, posuere convallis. Est lectus morbi leo mollis, pede nihil pharetra venenatis, sit est fermentum. 
 
</div>

Answer 4

您可以使用CSS動畫，使div的刻度0在第5秒後頁面加載，然後5秒後它會自動更改爲比例1，因爲它是默認比例值

@keyframes pop 
 
{ 
 
    0%{transform:scale(0);} 
 
    100%{transform:scale(0);} 
 
}

<div style="animation: pop 5s;">this div will be shown exactly 5s after page load</div>