<!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. java-No exception of type ConfigurationException can be thrown; an exception type must be a subclass of Throwable

    功能:读配置文件 java菜鸟:导入工程在报名处就开始报错,第一次遇到 import org.apache.commons.lang3.StringUtils; import org.apache.c ...

  2. JS模块化编程之AMD规范（转）

    随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...

  3. Mysql导入导出工具Mysqldump和Source命令用法详解

    Mysql本身提供了命令行导出工具Mysqldump和Mysql Source导入命令进行SQL数据导入导出工作,通过Mysql命令行导出工具Mysqldump命令能够将Mysql数据导出为文本格式( ...

  4. 网络编辑基础：对HTTP协议的头信息详解

    HTTP(HyperTextTransferProtocol) 是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP 协议的详细内容请参 考RFC2616.HTTP协议采用了请求/响应模型 ...

  5. IPC_共享内存

    在IPC(InterProcess Communication)的通信模式下,不管是使用消息队列还是共享内存,甚至是信号量,每个IPC的对象(object)都有唯一的名字,称为“键”(key).通过“ ...

  6. Servlet中response.sendRedirect()跳转时不能设置target的解决办法

    一般使用Struts2的拦截器(或者是filter)验证是否登录的时候,如果用户没有登录则会跳转到登录的页面.这时候一般可以在拦截器或者filter中用response.sendRedirect(). ...

  7. hdu 4643（计算几何）

    题意:容易理解 分析:切换的地点为两个基站所在直线的中垂线与两座城市所在直线的交点. 代码实现: #include <cstdio> #include <cmath> #inc ...

  8. 使用Spring MVC统一异常处理实战

    1 描述 在J2EE项目的开发中,不管是对底层的数据库操作过程,还是业务层的处理过程,还是控制层的处理过程,都不可避免会遇到各种可预知的.不可预知的异常需要处理.每个过程都单独处理异常,系统的代码耦合 ...

  9. 已经被cocos2dx给折腾的想要放弃它，专注Unity3D的怀抱了！

    一直使用cocos2dx编写自己的2D小游戏,不得不说,编写个人的超级小规模的游戏,使用cocos2dx有一定的优势,首先门槛很低,编写2D游戏用起来也算顺手,可惜一直没有一个优秀的UI编辑器,好不容 ...

  10. 2016年JavaScript技术栈展望

    如果你正在筹划新的前端项目或者重构现有项目,那么你需要认识到现在的前端开发环境已经今非昔比,这其中有太多的选择了:React.Flux.Angular.Aurelia.Mocha.Jasmine.Ba ...