效果图:

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. windows 开启/关闭本地连接的批处理程序

    ::命令前加@符号,表示不显示@后面的命令. @echo off title Open / Close Network ::本地网络适配器名称 set name=以太网 ::查看网络状态,后反向设定 ...

  2. ugui拖拽

    整理了下以前写的 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityE ...

  3. 应用安全 - 工具 - 浏览器 - IE浏览器 - 漏洞汇总

    CVE-2014-6332 Date 2014.11 CVE-2016-0189 | MS16-051 Date 2016年初 CVE-2018-8174

  4. 【Linux开发】直接渲染管理

    原文地址:https://dri.freedesktop.org/wiki/DRM/ DRM - Direct Rendering Manager DRM是一个内核级的设备驱动,既可以编译到内核中也可 ...

  5. django groupby 用法

  6. Java第二周总结

    一.Java 基础程序设计 第一章: (1)在Java中源文件的扩展名为.java,编译Java源程序文件产生相应的字节码文件扩展名为.class (2)public class定义要求类名称保持一致 ...

  7. PHP7中的数据类型(一)计数引用、写时复制,可垃圾回收

    列个简单的表格说明一下:

  8. PHP实现支付宝小程序用户授权的工具类

    背景 最近项目需要上线支付宝小程序,同时需要走用户的授权流程完成用户信息的存储,以前做过微信小程序的开发,本以为实现授权的过程是很简单的事情,但是再实现的过程中还是遇到了不少的坑,因此记录一下实现的过 ...

  9. k3 cloud在站点中新增用户

    1.进去金蝶云企业平台: 网址:https://cloud.kingdee.com/pt/ 2.进入控制台页面,我的产品下面选择添加用户 去cloud平台新增并同步用户注册信息 3.去管理中心更新用户 ...

  10. 模型验证方法——R语言

    在数据分析中经常会对不同的模型做判断 一.混淆矩阵法 作用:一种比较简单的模型验证方法,可算出不同模型的预测精度 将模型的预测值与实际值组合成一个矩阵,正例一般是我们要预测的目标.真正例就是预测为正例 ...