效果图:

html:

<div class="inner3">
<div class="over">
<img src="data: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;}
}

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

  1. CSS从大图片上截取小图标的操作

    注:图片名称(tabicons.png)每个小图标width:18px;height:18px从左上角坐标为(-0px;-0px;); 例如第一个对号的坐标为(-0px;-0px;)第二个加号的图标为 ...

  2. CSS从大图片上截取小图标的操作(转)

    一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-h ...

  3. CSS从大图片上截取小图标

    一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-h ...

  4. css实现在图片上显示文字

    一. 准备工作 1. 点击此下载 相关的文件 二. 浏览器中运行 play-img.html 文件,即可显示效果 三. 效果图

  5. CSS从大图片上截取小图标的操作以及三角形的画法

    #name{ background:url(images/name.png) no-repeat 2px 2px; background-position: -2px -70px;//其中这个是定位图 ...

  6. css动画特效与js动画特效(一)------2017-03-24

    1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...

  7. 用HTML和CSS实现WWDC 2015上的动画效果

    用HTML和CSS实现WWDC 2015上的动画效果 动画效果WWDC 2015   原文:https://cssanimation.rocks/wwdc15/ 译者:周晓楷(@Helkyle) 每年 ...

  8. CSS 动画之十-图片+图片信息展示

    这个动画主要是运用了一些css3的特性,效果是展示一张商品图片,然后在商品图片的制定位置显示该商品的详细信息.效果在chrome浏览器中预览. <!DOCTYPE html> <ht ...

  9. CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)

    转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...

随机推荐

  1. django连接和游标

    连接和游标主要实现 PEP 249中描述的Python DB API标准——除非它涉及到事务处理. 如果你不熟悉Python DB-API,注意cursor.execute()中的SQL语句使用占位符 ...

  2. FLUME安装&环境(一):netcat类型配置

    1.下载软件 在 /opt/deploy 下新建 flume 文件夹: # mkdir / opt/deploy / flume 到Flume官网上http://flume.apache.org/do ...

  3. 实验3&总结5

    老师:lijin2019,助教:晨晨果 提交作业 实验三 String类的应用 实验目的 掌握类String类的使用: 学会使用JDK帮助文档: 实验内容 1.已知字符串:"this is ...

  4. java锁的使用

    1 synchronize和ReentrantLock synchronize锁是jvm内置的锁,它锁的是synchronize所在的类的对象,要同步那么就只能有一个对象. ReentrantLock ...

  5. Spark-Core RDD行动算子

    1.reduce(func) 通过func函数聚集RDD 中的所有元素,先聚合分区内数据,再聚合分区间数据. scala> val rdd1 = sc.parallelize(1 to 100) ...

  6. Codeforces 1262F Wrong Answer on test 233(组合数)

    E1:设dp[i][j],表示在第i个位置的当前新状态超过原状态j分的方案数是dp[i][j],那么对于这种情况直接进行转移即可,如果a[i]==b[i]显然k种选择都可以,不影响j,如果不一样,这个 ...

  7. Linux菜狗入门(不停更新)

    资料来源:<腾讯课堂> 1, 计算机硬件包括CPU,内存,硬盘,声卡等等 2, 没有安装操作系统的计算机,通常被称为裸机 如果想在裸机上运行自己所编写的程序,就必须用机器语言书写程序 如果 ...

  8. jsoncpp解析

    讲jsoncpp解析json的文章,很不错,可以参考: http://blog.csdn.net/hzyong_c/article/details/7163589 http://www.cnblogs ...

  9. React事件绑定的几种方式对比

    React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined.通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构 ...

  10. linux中文件权限格式与chmod命令以及用户和用户组的管理

    简单了解一下linux中的文件权限格式与chmod命令 chmod命令:改变文件或者目录的权限 格式:chmod [参数] [<权限范围><符号><权限代码>] - ...