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>

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

posted @ 2014-08-19 18:30  kaisela  阅读(395)  评论(0)  编辑  收藏  举报