javascript - 如何使用纯 css 或纯 javascript 从底部滑动 div

Question

• 所以我在背景中有一张图片，上面有一个显示广告的 iframe 效果。 (跳房子是广告，花是html图片)
• 我要做的就是展示从背景图片底部向上滑动的广告。我尝试了很多东西。寻找纯 css 或纯 javascript 解决方案。

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

例如，请检查此页面上的广告:-

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

Answer 1

我猜这就是你要找的:

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

<div class="container">
<div class="img">

</div>
<div class="slidemeup">
SLIDE ME UP
</div>
</div>

我使用了类 img 的 div 而不是图像。但它应该以任何一种方式工作