如何使用纯的CSS或纯javascript

问题描述：

从底部一个div滑动所以我有在背景上的图像和表示上述广告的iframe效果。（跳房子一个是广告，花是html图像）
我想要做的就是显示广告从背景图像的底部向上滑动。我尝试了很多东西。寻找纯粹的CSS或纯JavaScript解决方案。

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

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

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

分享一些相关的代码，所以我们可以帮助你更好 –

答

我想这是你在找什么：


 
.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。但它应该可以工作

感谢Mihai T.我是新的前端开发。任何关于如何改进我在HTML和CSS方面的知识的建议。我应该开始自己的项目还是通过课程练习。我知道它有一个陡峭的学习曲线，但一些方向将有所帮助。 – MiHawk

好。起初，你应该看看这个网站http://www.w3schools.com/有点知道什么选项（css html jq），当你想解决问题时，你可以随意使用。但只有通过工作和尝试新的东西，你可以学习和提高你的知识:) 不要忘记给我的答案评分为接受:) –

我已经评价它。你提供解决方案的速度非常快。的确如此。 – MiHawk

答

放置页面下的广告以及何时应滑动起来给它一个激活类改变位置。

动画可以用transitions完成。

如何使用纯的CSS或纯javascript

相关推荐