css3 过度效果之物体向上冒出

<!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 过度效果之物体向上冒出

时间： 2024-07-31 14:25:49

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

css3过度效果

<!DOCTYPE html> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> p a{ font-size:20px; display:bl

css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是当我们使用上面的transition属性后,A点移动到B点是2秒内完成的,当执行JS代码时候,DIV还没到应该的位置,那么,在Div.style.left=B; console.log(Div.offsetLeft); 这样console出来的是起点坐标而不是终点坐标. 即使你让其JS线程主动挂起使

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

我想实现一个效果,从底部向上逐渐弹出.如下图所示: 1.点击显示按钮时,一个dialog对话框从底部慢慢向上弹出. 2.关闭dialog时, dialog缓慢的移动向底部消失.很平滑的效果. 实现方式: 在activity中写代码如下 public class MainActivity extends Activity { Button button1; @Override protected void onCreate(Bundle savedInstanceState) { su

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

我想实现一个效果,从底部向上逐渐弹出.如下图所示: 1.点击显示按钮时,一个dialog对话框从底部慢慢向上弹出. 2.关闭dialog时, dialog缓慢的移动向底部消失.很平滑的效果. 实现方式: 在activity中写代码如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 public class MainActivity extends Activity { Butto

css3毛玻璃效果白边问题

注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧! 1.毛玻璃实现方法: CSS3 blur滤镜实现如下测试代码: .blur { -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } 相关HTML代码如下: <im

Android TransitionDrawable ImageView过度效果使用实例

实现两张图片渐隐渐现的过渡效果Transition Drawable实现两张图片之间动态过度效果的方式. 运行如下所示:第一张为初始界面,第二张为过度中界面,第三张为过渡结束新建一个TransitionDrawable的Android工程. 目录结构: 主界面activity_main.xml代码如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns

css3 动画效果

css3 动画效果做css3的动画效果,w3c的文档的文档已有事例.动画事例,也是看了半天才搞出来. 下面我就是结合个人理解进行介绍.最后个人做的一个动画demo css3的动画事例主要需要理解animation:可以算是动画的声明部分.你可以把动画属性的内容全部写到后边,动画的属性主要有:animation-name animation-duration还有一些动画延时,动画播放次数.这些要根据动画效果进行添加. 格式有:animation:animation-name animation

纯CSS3文字效果推荐

之前曾经研究过几个纯css实现的文字效果,<CSS文字条纹阴影动画>和<响应式奶油立体字效果>等,今天我们来研究几款文字效果,主要利用text-shadow.webkit内核的几个独有特性实现效果. 在线研究单击这里,下载收藏单击这里. 效果1-立体字效果我们的html文件貌似这样,为了更好的展示效果,我们加上了可编辑属性. <div contenteditable="true" class="text effect01">前端

CSS3文本效果

CSS3文本效果实例1: 文本阴影: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3 文本阴影</title> <style> h1{text-shadow: 5px 5px 5px #FF0000;} </style> </head> <body> <h1>文本阴影效果