效果图:

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. 使用 go protoc --go_out 输出的 *.pb.go文件时报 undefined: proto.ProtoPackageIsVersion3

    事情是这样的:我参考go的 grpc 实现 https://grpc.io/docs/quickstart/go/ Download the example The grpc code that wa ...

  2. 【Appium遇到的坑】环境配置无误,路径无中文,无空格,提示error: Logcat capture failed: spawn ENOENT

    代码如下,提示error: Logcat capture failed: spawn ENOENT from appium import webdriver from time import slee ...

  3. centos6.9 安装mysql8

    centos6.9 安装 mysql8 # 安装mysql8 1.下载https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.16-2.el6.x86 ...

  4. 正反向代理、负载均衡、Nginx配置实现

    一.正反向代理 1.前提 我们曾经使用翻墙软件,访问google:使用了代理软件时,需要在浏览器选项中配置代理的地址,我们仅仅有代理这个概念,并不清楚代理还有正向和反向之分. 2.正向代理(代替客户端 ...

  5. exosip2 build

    Build eXosip on Win 1. download exosip  http://savannah.nongnu.org/projects/exosip/ 2. download libc ...

  6. angular 示例项目

    cnpm install 环境安装好后,快速创建一个新项目,如在D盘下新建一个angularProject项目,只要在本地目录下 ng new angularProject angularProjec ...

  7. JCTF 2014 小菜两碟

    测试文件:https://static2.ichunqiu.com/icq/resources/fileupload//CTF/JCTF2014/re200 参考文章:https://blog.csd ...

  8. 表格变色示例中发现的问题——attr()与prop()

    在练习jQuery表格变色例子过程中,发现了一下几个问题: 在IEEdge浏览器中切换选中行会出现上一个表格行背景色被吃掉的情况: 在chrome中从上向下单击行中任意单元可以选中该行,而从下往上单击 ...

  9. Myabtis中批量更新update多字段

    在mybatis中批量更新多个字段 推荐使用如下操作: 方式1:在Dao层接口中: void updateBatch(@Param("list")List<Student&g ...

  10. CentOS7编译安装MySQL8.0

    1.下载mysql8.0.16源码包和cmake源码包 cd /usr/local/srcwget https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-b ...