效果图:

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. Python基础语法之常量与变量

    一.变量的命名规则 只能以下划线,数字和字母组成,不可以是特殊字符: 不可以以数字开头: 关键字不可作为变量名: 变量名区分大小写: 要具有描述性: 二.常量 python中并没有关键字const,在 ...

  2. 【Qt开发】【Linux开发】调试记录:QFontDatabase::loadFromCache Error

    最近做嵌入式的Qt界面,在移植成功后遇到了一个问题:QFontDatabase::loadFromCache: Font path doesn't match.后面跟着便是两个路径. 解决方案就是对比 ...

  3. iptables添加开放端口

    查看状态 iptables -L -n 编辑/etc/sysconfig/iptables -A INPUT -p tcp -m tcp --dport 4000 -j ACCEPT 重启 servi ...

  4. Unique Word Abbreviation

    An abbreviation of a word follows the form <first letter><number><last letter>. Be ...

  5. CAS单点登录系统入门--分布式登录验证

    1.开源单点登录系统CAS入门 1.1 什么是单点登录 单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要 ...

  6. Nginx 1.相关介绍

    转 https://www.cnblogs.com/wcwnina/p/8728391.html Nginx的产生 没有听过Nginx?那么一定听过它的"同行"Apache吧!Ng ...

  7. openmvg中cmd模块解析

    ---恢复内容开始--- 在openmvg库中,定义了一个CmdLine类来定义例程的输入参数格式.源文件为.\openMVG\src\third_party\cmdLine\cmdLine.h. 先 ...

  8. jquery导航栏高亮(二级菜单点击一级保持高亮)

    <script type="text/javascript"> var urlstr = location.href; var urlstatus=false; $(& ...

  9. RabbitMq学习1-介绍、安装和配置

    一.简介 1.MQ框架非常之多,比较流行的有RabbitMq.ActiveMq.ZeroMq.kafka,以及阿里开源的RocketMQ       2.AMQP是消息队列的一个协议. 3.Rabbi ...

  10. A - 卿学姐与公主(线段树+单点更新+区间极值)

    A - 卿学姐与公主 Time Limit: 2000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submi ...