想要一秒钟后弹出

Question

我想要一个带有关闭按钮的弹出窗口。它将在 5 秒后和页面完全加载后显示。

有什么 CSS 技巧吗？

Answer 1

我不确定这是否对你有用

但不知何故，有人问了一个几乎相同（但上下文不同）的案例。你可以试试看this

注意：如果我错了，请纠正我

Answer 2

你可以试试这个

.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 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 动画在页面加载后的前 5 秒内使 div 的比例为 0，然后在 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>