- 所以我在背景中有一张图片,上面有一个显示广告的 iframe 效果。 (跳房子是广告,花是html图片)
- 我要做的就是展示从背景图片底部向上滑动的广告。我尝试了很多东西。寻找纯 css 或纯 javascript 解决方案。
广告应该从背景图片的底部滑动,然后固定在它显示的位置。只是从底部到广告显示的滑动效果。
例如,请检查此页面上的广告:-
最佳答案
我猜这就是你要找的:
.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 而不是图像。但它应该以任何一种方式工作
关于javascript - 如何使用纯 css 或纯 javascript 从底部滑动 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38605987/