<!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. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. CXF之九 WS-Security

    Webservice 的安全 Webservice为作为方便的服务被用广大领域使用的同时,也成为了黑客们的美食.在这里,本文将就目前对Webservice安全所能做的改进做简单介绍.在Webservi ...

  3. size_type、size_t、differentce_type以及ptrdiff_t

      目录(?)[-] size_type size_t different_type ptrdiff_t size_t是unsigned类型,用于指明数组长度或下标,它必须是一个正数,std::siz ...

  4. 【LeetCode 235】Lowest Common Ancestor of a Binary Search Tree

    Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the BS ...

  5. spring开发相关网址

    jar包下载地址:http://repo.springsource.org/libs-release-local/org/springframework/spring/

  6. 分段统计与Oracle的分析函数、逻辑判断等知识点的综合运用

    重点部分:TOTAL层 项目要求: 统计每个巡检员(USER_ID)当前月的签到率及查询相关字段 签到率公式:以巡检员为单位, (当月至今天为止签到的所有点/该月巡检点的总个数)=(b.Point/a ...

  7. Python 以指定概率获取元素

    这是Python cookbook的示例 1 def random_pick(some_list,probabilities): 2 x=random.uniform(0,1) 3 cumulativ ...

  8. java学习随笔--- 捣蛋vector

    最近比较有时间啦,有时间搞下java,个人觉得学这门语言语法太多啦,不一一去学习啦,心血来潮,挂了个struct2的源代码,一入深似海啊,看得我天花缭乱,从最简单的开始吧 public static ...

  9. html5 canvas图片翻转

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. dom div移动解决停顿问题

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...