Question

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

有没有CSS技巧？

Answer 1

您可以使用css动画在页面加载后的前5秒内使div的比例为0，然后在5s之后它将自动更改为比例1，因为它是默认的比例值

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以试试这个

＆＃13;

.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; }
}

＆＃13;

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

＆＃13;

Answer 3

我不确定这是否适用于你

但不知怎的，那里的一个人被问到几乎相同（但不同的背景）的情况。您可以尝试检查this

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

Answer 4

只能使用CSS，使用动画和复选框黑客

来完成

我建议您将来尝试自己动手，至少发布您尝试过的内容或示例代码。这不是代码制作网站。我们帮助您找到解决方案，但我们需要看到您尝试了一些方法。

无论如何，我有一些空闲时间，想帮助你。但这不会经常发生在SO

上

所以在这里。使用silibing选择器（+，〜），CSS动画和复选框点击黑客

见下文

＆＃13;

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%);
  }
}

＆＃13;

<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>

＆＃13;

想要在一秒钟之后弹出一个

4 个答案: