您的位置：首页 > Web前端 > CSS

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

2014-08-19 18:30 363 查看 
<!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>




小兔子会从椭圆中间向上显示出来。可模仿建筑物突起等功能
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航