如何使用纯CSS或纯JavaScript从底部滑动div
米霍克
- 因此，我在背景中有一张图片，并在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>我用了一个div与类img而不是图像。但无论哪种方式都可以工作
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使用@keyframes为每个div正确设置动画以在纯JavaScript中滑动？
- 2
如何使用纯CSS覆盖div？
- 3
如何使用纯 CSS？
- 4
使用纯CSS向右滑动效果
- 5
使用纯CSS在菜单下滑动箭头
- 6
使用纯CSS在菜单下滑动箭头
- 7
使用纯 css 从左侧滑动导航栏
- 8
如何使用纯CSS使空的div或容器发光？
- 9
CSS：使用radio：checked滑动图像（纯CSS滑块）
- 10
如何使用纯JavaScript在DIV中获取所有ID
- 11
如何使用纯Javascript从Div中的Span获取文本值
- 12
如何使用纯Javascript随机应用CSS样式？
- 13
悬停时使活动菜单标记滑动并使用纯CSS单击？
- 14
使用javascript触发纯CSS模式
- 15
如何使用纯CSS创建此箭头
- 16
如何使用纯CSS弹出菜单
- 17
在纯CSS图片上向下滑动
- 18
如何使用纯JavaScript处理事件？
- 19
如何使用纯JavaScript产生fadeOut效果
- 20
如何使用Maven创建纯JavaScript项目？
- 21
如何在nuxtjs中使用纯JavaScript？
- 22
如何使用纯JavaScript选择<html>元素？
- 23
如何使用纯Javascript使此按钮行为？
- 24
使用纯Javascript调用<div>标记中包含的CSS弹出窗口
- 25
如何使用纯CSS / HTML将图像放置在具有动态高度的DIV中？
- 26
使用纯 css 的条形图如何从主 div 添加文本
- 27
如何仅使用纯 JavaScript 和 CSS 制作 OnScroll 动画.. 不使用任何库
- 28
如何在纯CSS中向左或向右放置div？
- 29
如何使用纯JAvaScript制作div大小调整器
我来说两句