<!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. Spring框架入门：（非原著，转载）

    1.1.      耦合性和控制反转: 对象之间的耦合性就是对象之间的依赖性.对象之间的耦合越高,维护成本越高.因此,对象的设计应使类和构件之间的耦合最小. 例: public interface I ...

  2. 在 Asp.NET MVC 中使用 SignalR 实现推送功能

    一,简介Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重新发送请 ...

  3. Name-based virtual servers 给予名称的虚拟服务

    nginx first decides which server should process the request. Let’s start with a simple configuration ...

  4. PIC和PIE

    PIC指的是位置无关代码,用于生成位置无关的共享库,所谓位置无关,指的是共享库的代码断是只读的,存放在代码段,多个进程可同时公用这份代码段而不需要拷贝副本.库中的变量(全局变量和静态变量)通过GOT表 ...

  5. ipv4头部分析，读书笔记3

    ip头部最长是60字节,前面的20字节是固定的,选项可加上40字节 4位版本号--- 对于ipv4来说呢,就是4 4位头部长度 ---  表示 有多小个32bit(4字节),4位最大表示数是15啦,也 ...

  6. Cloudera Manager5安装总结遇到问题及解决办法

    安装过程中,由于网络终端,导致下面问题: 问题1:安装停止在获取安装锁/tmp/scm_prepare_node.tYlmPfrT using SSH_CLIENT to get the SCM ho ...

  7. VS2012打包部署Winform程序

    打包前的准备工作: 新建一个打包部署项目,点OK,如果是第一次使用的话,会打开一个网页,按照提示的步骤来做, 点击上面的step2的网址,进入到另一个网页: 填写完右边的信息,点击“download ...

  8. httpcomponents 学习1--并发多线程GET

    package org.apache.http.examples.client; import org.apache.http.HttpEntity; import org.apache.http.H ...

  9. ntpd和ntpdate

    以无GUI 的Ubuntu 为例 1. ntpdate ntpdate是Ubuntu发行版的标配.按Ubuntu14.04的官方文档(这里),Ubuntu在启动时,会调用ntpdate,根据Ubunt ...

  10. 内存中的static、const实现形式

    最近在考虑下半年找工作的事情,看了不少面试题目,其中还是蛮有收获的,把基础好好复习了一遍.比如这个题目,static.const现形式,static和const类型的变量在写程序的时候也写了很多,不过 ...