<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>无标题文档</title>

<link type="text/css" href="animate.css"/>

</head>

<style>

    .container{ width:960px; height:600px; margin:30px auto; position:relative;}

    .bottom1{ position:absolute; bottom:246px; background:url(img/bottom2.png); height:107px; width:960px;}

    .bottom2{ position:absolute; bottom:200px; background:url(img/bottom1.png); height:46px; width:960px; z-index:4;}

    .rub{ position:absolute; bottom:246px;  left:357px; width:246px; height:200px; background:url(img/rub.png); z-index:2;

        animation:myfirst 1500ms;

    }

    .cover{position:absolute; bottom:0px; background:#fff; height:230px; width:960px; z-index:3}

    @keyframes myfirst

    {

    0%   {bottom:0px;}

    100% {bottom:246px;}

    }

</style>

<body>

    <div class="container">

        <div class="rub"></div>

        <div class="bottom1"></div>

        <div class="bottom2"></div>

        <div class="cover"></div>

    </div>

</body>

</html>

小兔子会从椭圆中间向上显示出来。可模仿建筑物突起等功能

css3 过度效果之物体向上冒出的更多相关文章

  1. 微信小程序（19）-- 从底部向上滑出的动画效果

    从底部向上滑出的动画效果: 用到了小程序的触摸事件bindtouchmove,以及创建一个annimation对象,完成动画操作之后使用animation这个对象的export()方法导出动画数据. ...

  2. 2d旋转（css3实现过度效果和动画效果）

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. HTML 学习笔记 CSS3(过度 transition)

    通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.请把鼠标移动到下面的元素上: 先看一下这个代码 实现旋转放大的效 ...

  4. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  5. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  6. 从页面底部向上弹出dialog，消失时逐渐向下（转）

    我想实现一个效果,从底部向上逐渐弹出.如下图所示: 1.点击 显示 按钮时,一个dialog对话框从底部慢慢向上弹出. 2.关闭dialog时, dialog缓慢的移动向底部消失.很平滑的效果.   ...

  7. CSS3实现Tooltip提示框飞入飞出动画

    原文:CSS3实现Tooltip提示框飞入飞出动画 我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片.还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观 ...

  8. css3 3D效果

    css3 3D变形 transfrom初学 这个礼拜学了css3 3d,感觉到css无穷的魅力,可以通过几个特定的代码符号创建出3D效果的页面. ___ 透视 一个元素需要一个透视点才能激活3D空间, ...

  9. android开发(31) 动画演示 - 从页面底部向上弹出dialog，消失时逐渐向下

    我想实现一个效果,从底部向上逐渐弹出.如下图所示: 1.点击 显示 按钮时,一个dialog对话框从底部慢慢向上弹出. 2.关闭dialog时, dialog缓慢的移动向底部消失.很平滑的效果.   ...

随机推荐

  1. 别人的的MYSQL学习心得（十五） 日志

    我的MYSQL学习心得(十五) 日志 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...

  2. linux apache 配置fastcgi

    Redhat 上 FastCGI 安装与配置 软件包 相关软件包: httpd 2.2.14      //注意版本 这个版本不会出问题   注:apache httpd安装 fcgi-2.4.0.t ...

  3. 最全的PHP开发Android应用程序

    第一部分是指在Android系统的手机上直接写PHP脚本代码并立即运行: 第二部分则继续讲解如何把写好的PHP脚本代码打包成akp安装文件. 首先,在手机上安装两个apk包. 一个是SL4A(Scri ...

  4. 嵌入式 linux下利用backtrace追踪函数调用堆栈以及定位段错误

    嵌入式 linux下利用backtrace追踪函数调用堆栈以及定位段错误 2015-05-27 14:19 184人阅读 评论(0) 收藏 举报  分类: 嵌入式(928)  一般察看函数运行时堆栈的 ...

  5. CMake实践（3）

    一,本期目标 [sun@localhost t3]$ cat README t3:静态库(.a)与动态库(.so)构建    任务:1,建立一个静态库和动态库,提供HelloFunc函数供其他程序编程 ...

  6. hdu 5423 Rikka with Tree（dfs）bestcoder #53 div2 1002

    题意: 输入一棵树,判断这棵树在以节点1为根节点时,是否是一棵特殊的树. 相关定义: 1.  定义f[A, i]为树A上节点i到节点1的距离,父节点与子节点之间的距离为1. 2.  对于树A与树B,如 ...

  7. Java 与无符号那些事儿

    最近在使用 Java 作为 WebSocket 客户端连接 Node.js 的 WebSocket 服务器的时候,由于使用的客户端库比较老,所以遇到了字节符号的问题,上网查了一下,看到这篇文章写的很有 ...

  8. 插件五之滚动条jquery.slimscroll.js

    前言 slimscroll.js用于模拟传统的浏览器滚动条(竖向),原理为原内容内置于一个仅可视区域显示层,使用2个div层用于模拟滚动条和滚动条背景轨道监听滚动条div高度变化来控制内容层位置(猜测 ...

  9. selenium + python 多浏览器测试

    selenium + python 多浏览器测试 支持库包 在学习 Python + Selenium 正篇之前,先来看下对多浏览器模拟的支持.目前selenium包中已包含webdriver,hel ...

  10. 网站压力测试工具-Webbench源码笔记

    Ubuntu 下安装使用 1.安装依赖包CTAGS sudo apt-get install ctage 2.下载及安装 Webbench http://home.tiscali.cz/~cz2105 ...