显示某些秒的显示弹出窗口＆amp;一段时间后它会自动隐藏

Question

显示某些秒的显示弹出窗口＆amp;一秒钟后它将自动隐藏。

CSS中有什么办法吗？ 我不想在javascript中使用。

Answer 1

您可以使用CSS动画来实现此目的。

.popup {
  /* apply 3 second hiding animation after 10 second delay */
  animation: hide 3s 10s forwards;

  /* fix popup at the center of screen, optional style */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  padding: 20px;
  /* dimming entire screen except popup */
  outline: 100vmax solid #ccc;
}

@keyframes hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<div class="popup">
  This is popup
</div>