码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-08-19 20:36:25      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   io   ar   2014   

<!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>

bubuko.com,布布扣

小兔子会从椭圆中间向上显示出来。可模仿建筑物突起等功能

css3 过度效果之物体向上冒出,布布扣,bubuko.com

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

标签:style   blog   http   color   os   io   ar   2014   

原文地址:http://www.cnblogs.com/kaisela/p/3922831.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!