如何使用纯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。 但无论哪种方式都可以

Answer 2

将广告放在页面下方，当它应向上滑动时，为其提供一个激活类，该类可以更改位置。

动画可以通过转场来完成。