如何创建使用 CSS3 自动滑入和滑出的 div

Question

我想创建一个 div，它在调用网页时自动滑入，并能够使用 X 关闭它，如果不按 X，它会在 5 秒后自动关闭。

所以可以说：从网页顶部滑入 div 宽度为 200 像素，高度为 200 像素。

如何使用 css3 转换来创建它？

Answer 1

使用 css3:

按照下面的滑块代码 div

首先在 CSS 下方添加 html:

<style>
.slider {
   background: #000;
   color: #fff;
   height: 20px;
   position: relative;
   padding: 30px;

   -moz-animation-name: dropSlider;
   -moz-animation-iteration-count: 1;
   -moz-animation-timing-function: ease-out;
   -moz-animation-duration: 1s;

   -webkit-animation-name: dopSlider;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-timing-function: ease-out;
   -webkit-animation-duration: 1s;

   animation-name: dropSlider;
   animation-iteration-count: 1;
   animation-timing-function: ease-out;
   animation-duration: 1s;
}

@-moz-keyframes dropSlider {
   0% {
      -moz-transform: translateY(-250px);
   }

   100$ {
      -mox-transform: translateY(0);
   }
}

@-webkit-keyframes dropSlider {
   0% {
      -webkit-transform: translateY(-250px);
   }

   100% {
      -webkit-transform: translateY(0);
   }
}

@keyframes dropSlider {
   0% {
      transform: translateY(-250px);
   }

   100% {
      transform: translateY(0);   
   }
}

#divSlider.close {
   opacity:0;
}

button {
   position: absolute;
   top: 0px;
   right: 0px;
}
</style>

现在，在您的正文部分添加以下代码：

<div align='center'>
   <div id='divSlider' class='slider' style='height:200px; width:200px; border:solid;'>
       <button type='button' onclick='closeMe();'>X</button>
       <h1>Slider Div</h1>
   </div>
</div>

然后最后在正文末尾添加以下脚本：

<script>
   setTimeout(function() {
      document.getElementById('divSlider').className = 'close';
   }, 5000);

   function closeMe() {
      document.getElementById('divSlider').className = 'close';
   }
</script>

最后，您的 html 可以执行了....

我相信这会帮助您解决问题，如果确实如此，请不要忘记标记我的答案...(^_^)

谢谢...

setTimeout(function() {
  document.getElementById('divSlider').className = 'close';
}, 5000);

function closeMe() {
  document.getElementById('divSlider').className = 'close';
}

.slider {
  background: #000;
  color: #fff;
  height: 20px;
  position: relative;
  padding: 30px;
  -moz-animation-name: dropSlider;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-out;
  -moz-animation-duration: 1s;
  -webkit-animation-name: dopSlider;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-duration: 1s;
  animation-name: dropSlider;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 1s;
}
@-moz-keyframes dropSlider {
  0% {
    -moz-transform: translateY(-250px);
  }
  100$ {
    -mox-transform: translateY(0);
  }
}
@-webkit-keyframes dropSlider {
  0% {
    -webkit-transform: translateY(-250px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@keyframes dropSlider {
  0% {
    transform: translateY(-250px);
  }
  100% {
    transform: translateY(0);
  }
}
#divSlider.close {
  opacity: 0;
}
button {
  position: absolute;
  top: 0px;
  right: 0px;
}

<div align='center'>
  <div id='divSlider' class='slider' style='height:200px; width:200px; border:solid;'>
    <button type='button' onclick='closeMe();'>X</button>
    <h1>Slider Div</h1>
  </div>
</div>

如何创建使用 CSS3 自动滑入和滑出的 div

How to create div that automatically slides in and out with CSS3

css

transitions