9({S1(}@EF(${4D}0YXY5`0.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>飞吧首页动画效果</title>
<link rel="stylesheet" href="css/common.css" />
</head>
<body>
<style>
#wrap{background: #ff5046;}
.header{width: 960px; height: 80px; margin: 0 auto; line-height: 80px;}
.header-l{vertical-align: middle; width: 300px;}
.header-r{}
.header-r ul li {float: left;}
.header-r ul li a{color: #FFFFFF; font-size: 17px}
.title img,.title a,.connter{display: block; margin: 0 auto;}
.title a{width: 103px;height: 48px; color: #FFFFFF; line-height: 48px; padding-left:60px ; background: url(img/download.png);}
.connter{width: 960px; height: 413px; position: relative;}
.connter img{position: absolute;}
.connter img:nth-child(1){top: 111px; left: -1000px;}
.connter img:nth-child(1).on{left: -28px; transition: 0.5s 0.85s;}
.connter img:nth-child(2){top: 81px; left: -1000px;}
.connter img:nth-child(2).on{ left: 151px; transition: 0.5s 0.45s;}
.connter img:nth-child(3){top: 13px; left: 313px;
animation: move 1s linear;
}
@keyframes move{
0%{opacity: 0; transform:scale(0);}
30%{opacity: 1;transform:scale(1.2) }
40%{opacity: 1;transform:scale(0.85) }
50%{opacity: 1;transform:scale(1.1) }
60%{opacity: 1;transform:scale(0.95) }
70%{opacity: 1;transform:scale(1.1) }
80%{opacity: 1;transform:scale(0.95) }
90%{opacity: 1;transform:scale(1.05) }
100%{opacity: 1;transform:scale(1) }
}
.connter img:nth-child(4){top: 22px; left: 1530px;}
.connter img:nth-child(4).on{ left: 514px;transition: 0.5s 0.45s;}
.connter img:nth-child(5){top: 0px; left: 1530px;}
.connter img:nth-child(5).on{ left: 668px; transition: 0.5s 0.85s;}
</style>
<div id="wrap" class="clearfix">
<div class="header-l fl">
<img src="img/logo.png" />
</div>
<div class="header-r fl">
<ul class="clearfix">
<li>
<a href="">页面1</a>
<a href="">页面2</a>
<a href="">页面3</a>
<a href="">页面4</a>
<a href="">页面5</a>
<a href="">页面6</a>
<a href="">页面7</a>
</li>
</ul>
</div>
</div>
<!--wenzi-->
<div class="title"><img src="img/ktv.png" alt="" /><a href="">免费下载</a></div>
<!--img-->
<div>
<div class="connter">
<img src="img/top1.png" alt="" />
<img src="img/top2.png" alt="" />
<img src="img/top3.png" alt="" class="ty" />
<img src="img/top4.png" alt="" />
<img src="img/top5.png" alt="" />
</div>
</div>
<script type="text/javascript" src="js/jquery-2.2.4.min.js" ></script>
<script>
$(function(){
$(".connter img").not("ty").addClass("on")
})
</script>
</body>
</html>
