Question

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

所以我们说：从网页顶部滑入，div是200px宽度，高度是200px。

如何使用css3过渡创建它？

Answer 1

使用css3：

按照下面的滑块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已准备好执行....

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

...谢谢

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: