效果图:

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. 中国MOOC_面向对象程序设计——Java语言_第1周 类与对象_1分数

    第1周编程题 查看帮助 返回   我们在题目说明中给出了一部分代码,你需要在这部分代码的基础上,按照题目说明编写代码,然后将两部分代码一起提交. 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨 ...

  2. 类Enum

    int compareTo(E o) 比较此枚举与指定对象的顺序. String name() 返回此枚举常量的名称,在其枚举声明中对其进行声明. int ordinal() 返回枚举常量的序数(它在 ...

  3. Application.CreateForm()和TForm.Create()创建的窗体有什么区别么?二者在使用上各有什么技巧?(50分)

    https://wedelphi.com/t/135849/ 请详细些,并给出例子.谢谢. Application.CreateForm()创建的第一个可显示的窗体是自动成为主窗体,并且自动显示,并且 ...

  4. 在树莓派上搭建jupyter notebook server

    自从搬家后,树莓派闲置了好一段时间,最近打算将其利用起来.想来想去,搭个jupyter notebook用要靠谱的,毕竟经常要实验一些Python脚本. 具体过程参考以下链接: https://www ...

  5. Centos快速安装 Memcached

    rpm qa|grep memcached //首先检查memcache是否已经安装完成 yum install memcached //(提示你是否确认安装输入y)检查完成后执行安装命令 yum i ...

  6. Java多线程学习——知识点积累

    开启多线程时,每一个线程都拥有自己的工作空间,每个工作空间都单独的和主存打交道. 并发的概念:多个线程同时操作同一个对象 当产生并发时,如果从工作空间写入数据到内存的线程时间片用完了,其他线程再从主存 ...

  7. Neither abstinence nor excess ever renders man happy

    inch.n. 英寸 courageous.adj.勇敢的 porcelain.n.瓷器 adj.脆的 inventor. n. 发明者 trivial.adj. 不重要的 grove.n.小树林,果 ...

  8. OSPF与ACL 综合应用

    1.企业内网运行OSPF路由协议,区域规划如图所示:2.财务和研发所在的区域不受其他区域链路不稳定性影响:3.R1.R2.R3只允许被IT登录管理:4.YF和CW之间不能互通,但都可以与IT互通:5. ...

  9. 选择排序--python

    def findSmallest(arr): smallest = arr[0] smallest_index = 0 for i in range(1, len(arr)): if arr[i] & ...

  10. Hibernate 日期映射 条件查询

    1. hql: ...and accopt_time > ?" 2. query.setDate Query query = session.createQuery(hql); int ...