css - 如何用CSS3创建自动滑入滑出的div

Question

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

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

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

Answer 1

使用 css3 为您的 slider div 按照以下代码:

首先在您的 html 中添加以下 CSS:

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