如何使用纯CSS或纯JavaScript从底部滑动div

Question

• 所以我在背景中有一张图片，iframe效果显示上面的广告。 （Hopscotch one是广告。花是html图片）
• 我要做的就是显示广告从背景图片的底部向上滑动。我尝试了很多东西。寻找纯CSS或纯JavaScript解决方案。

广告应从背景图片的底部滑动，然后固定在显示的位置。只是从底部到广告的滑动效果。

例如，请在此页面上查看广告： -

http://www.thenewsminute.com/article/united-states-south-india-can-southern-collective-get-us-better-deal-delhi-46501

Answer 1

我想这就是你要找的东西：

＆＃13;

＆＃13;

<div class="fb-send" data-href="http://www.mywebsite.com/here/?ref=<?php echo $current_user->ID; ?>"  data-size="small"></div>

＆＃13;

 
.container {
  position:relative;
  overflow:hidden;
  width:300px;
  height:200px;
}  
.img {
  width:100%;
  height:100%;
  background:blue;
}

.slidemeup{
  background:red;
  position:absolute;
  bottom:-50px;;
  height:50px;
  width:100%;
  left:0;
  animation-name:slideup;
  animation-delay:0.5s;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  animation-timing-function:ease-out;

  
}
@keyframes slideup {
  0%{bottom:-50px}
  100%{bottom:0;}
}

＆＃13;

＆＃13;

＆＃13;

我使用了一个带有<div class="container"> <div class="img"> </div> <div class="slidemeup"> SLIDE ME UP </div> </div>类的div而不是图像。但它应该以任何方式工作

Answer 2

将广告放在页面下方，当它应该向上滑动时，给它一个更改位置的激活类。

可以使用transitions完成动画。