<!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. 反编译APK的工具和方法

    我们使用dex2jar以及JavaDecompiler反编译手机QQ浏览器V5.4,来学习和实践安卓反编译的技巧和方法.学习过程中需要用到的工具和资源,直接点击红色链接可以下载. 第一步:APK本身就 ...

  2. 将cocos2dx项目从Visual Studio 迁移到 xcode

    因为Visual Studio和XCode的巨大差异性,一开始选择任何一个IDE,都会有一个迁移的过程,XCode的迁移到Visual Studio相对非常简单,不用再介绍.将项目从Visual St ...

  3. 上传Test Result和attachment到ALM

    之前在HP的时候用ALM,还是很好用的功能很强大的一个测试管理工具,当时用C#依照ALM的API实现了一个上传测试结果的程序,现在贴出来: 这个程序的使用方式很自由,使得ALM几乎可以和所有测试工具做 ...

  4. C语言的 (强制类型转换) 以及 '字符字面值'

    C语言的显式/隐式类型转换,都有一个中间变量的存在,原数据的类型.内容都不变. 以下代码,都用GCC编译. #include<stdio.h> int main() { char c = ...

  5. SQL和NOSQL有区别吗？

    在大数据高速发展的今天,数据量在不断的增加,传统的数据库可能不能满足人们的需求了,这个时候新霸哥注意到了NOSQL出现了可以解决这个问题.我们知道sql数据库可以存储数据和处理数据,但是NOSQL最大 ...

  6. 捣蛋phpwind控制器注入

    在PwBaseController 里面,会有这个方法的存在 /** * action Hook 注册 * * @param string $registerKey 扩展点别名 * @param Pw ...

  7. mybatis系列-16-spring和mybatis整合

    16.1     整合思路 需要spring通过单例方式管理SqlSessionFactory. spring和mybatis整合生成代理对象,使用SqlSessionFactory创建SqlSess ...

  8. strtol()函数

    #include <stdlib.h>#include <stdio.h> int main(){ char a[] = "100"; char b[] = ...

  9. 从 Page not found: / 提示说起，我是怎么发现webstrom与myeclipse冲突问题及解决的

    #从 Page not found: / 提示说起,我是怎么发现webstrom与myeclipse冲突问题的 ##  从前面发表了两篇博文,[webstorm+nodejs+JetBrains ID ...

  10. spark的环境安装

    1.安装sbt 正常安装流程. 在cmd里运行的时候,要提前设置代理(如果上网有代理),set JAVA_OPTS=-Dhttp.proxySet=true -Dhttp.proxyHost=172. ...