我有一张小树的图片,我想使用 jQuery 和 CSS 让它从底部生长到顶部。
目前树的 bottom
位置为 0,并使用 animate()
jQuery 函数上升。
我可以制作一个与树重叠的 div
并使用 animate()
jquery 函数为它设置动画并删除它的 height
,但是原始背景(body
)使用了 CSS 渐变,所以我不能让 div
与图像重叠。
这是我的代码:
CSS:
.wrap_tree{
height:300px;
position:relative;
}
.tree{
overflow: hidden;
position:absolute;
display:none;
bottom:0px;
width:200px;
left:28%;
}
HTML:
<div class="wrap_tree">
<div class="tree">
<img src="tree.png"/>
</div>
</div>
JavaScript/jQuery:
$('.tree').animate({
height: 'toggle'
},5000);
最佳答案
用 Pure CSS 做这个怎么样?我使用 CSS3 @keyframe
说明:我只是使用 absolute
定位元素重叠树,而不是使用 @keyframe
将 height
属性折叠为 0
,其余的不言自明。
Demo 2 (添加了 position: relative;
到容器元素,因为这很重要,否则你的 position: absolute;
元素将在野外耗尽)
Demo 3 调整 animation-duration
以降低动画速度
.tree {
width: 300px;
position: relative;
}
.tree > div {
position: absolute;
height: 100%;
width: 100%;
background: #fff;
top: 0;
left: 0;
-webkit-animation-name: hello;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-name: hello;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.tree img {
max-width: 100%;
}
@keyframes hello {
0% {
height: 100%;
}
100% {
height: 0%;
}
}
@-webkit-keyframes hello {
0% {
height: 100%;
}
100% {
height: 0%;
}
}
关于javascript - 从下到上动画图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21954631/