CSS-动画,让图片上的图形有涨起来的效果(逐渐变高)和(逐渐变长)

效果图:

html:

<div class="inner3">
<div class="over">
<img src="image/kuang3tt.png" />
</div>
</div>

css:

.inner3{
margin-top: 20px;
width: 890px;
height:169px;
background: url(../image/kuang33.png) no-repeat;
}
.over{
position: absolute;
bottom: 32px;
left: 0;
height: 0;
width: 880px;
overflow: hidden;
animation: zt 2s ease 0.5s forwards;
}
.inner3 img{
margin-top: 12px;
margin-left: 63px;
height: 126px;
width: 810px;
position: absolute;
bottom: 0;
}

@keyframes zt
{
0% {height: 0;}
100% {height: 136px;}
}

猜你喜欢

转载自www.cnblogs.com/snowbxb/p/11514355.html
今日推荐