当前位置 : 主页 > 网页制作 > css >

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

来源:互联网 收集:自由互联 发布时间:2021-06-13
效果图: 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; bott

效果图:

 

 

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;}}

网友评论