Question

我有一个模态窗口，我试图在大约7秒后出现，有一个关闭按钮，所以用户可以根据需要关闭它。当您使用以下代码单击关闭按钮时，我将其关闭：

.tip {
  z-index: 99999;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  -o-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.tip:target {
    opacity:1;
    pointer-events: auto;
}

HTML：

<a href="#tip1">Open Modal</a>
<div class="tip" id="tip1">
  Try clicking around a bit.
  <a href="#close" title="Close" class="close">X</a>
</div>

如何在短暂延迟后首次加载页面时自动显示？我尝试使用CSS关键帧，但它会在出现后瞬间消失，或者关闭按钮根本不起作用。

Answer 1

您可以使用动画初始值:(这是手写的）

动画延迟：7s

我为你准备好了工作范例。我还使用了animation-fill-mode: forwards，所以在动画完成后，不透明度仍为1（与动画开始前不等于0）

动画填充模式：前锋;

完全放弃（速记）：

动画：myFade 0.5s linear 5s;

其中：

myFade是动画的名称
5s 延迟
0.5s 动画的持续时间
linear是计时功能

以下是工作示例：

.tip {
  z-index: 99999;
  opacity: 0;
  animation: myFade 0.5s linear 2s ;
  animation-fill-mode: forwards;
  width: 200px;
  height: 80px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  padding: 20px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
  position: absolute;
  margin:20px 30px;  
}
@-webkit-keyframes myFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.tip:target {  
  display:none;
}

.btn {
  padding: 7px 8px;
  background: #3786ad;
  font-size:12px;
  font-family: Arial, sans-serif;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  
  
}

<p>After 2 seconds popup would appear. Click [X] to close it.</p>
<br />

<a href="#tip1" class="btn">Open Modal</a>
<div class="tip" id="tip1">
  Try clicking around a bit.
  <a href="#tip1" title="Close" class="close">X</a>
</div>

延迟的CSS3模态窗口淡入

1 个答案: