<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#container{
position:relative;
height:300px;
}
#tpline{
width:800px;
height:44px;
position:absolute;
left:0;
top:0;
z-index:2;
background:url("http://images.cnblogs.com/cnblogs_com/ohmygirl/623826/o_hline.png") no-repeat;
}
div.item{
position:absolute;
top:22px;
width:75px;
height:100px;
}
#it_bm{left:100px;}
#it_ext{left:170px;}
#it_cfg{left:240px;}
#it_uni{left:310px;}
#it_uri{left:380px;}
#it_rtr{left:450px;}
#it_out{left:520px;}
#it_sec{left:590px;}
.line.vline{
width:75px;
background:url("http://images.cnblogs.com/cnblogs_com/ohmygirl/623826/o_vline.png") repeat-y scroll 10px 0;
}
#it_bm .line{height:50px;}
#it_ext .line{height:100px;}
#it_cfg .line{height:40px;}
#it_uni .line{height:120px;}
#it_uri .line{height:170px;}
#it_rtr .line{height:60px;}
#it_out .line{height:120px;}
#it_sec .line{height:160px;}
.ball{
width:75px;
height:75px;
background:url("http://images.cnblogs.com/cnblogs_com/ohmygirl/623826/o_bounds.png") scroll -338px -3px;
}
#it_ext .ball {background-position: -256px -3px;}
#it_cfg .ball {background-position: -170px -3px;}
#it_uni .ball,#it_out .ball {background-position: -85px -3px;}
#it_uri .ball {background-position: -4px -3px;}
.ball a{
display:block;
color:white;
height:14px;
line-height:14px;
color:white;
font-weight:bold;
text-align:center;
padding:28px 0;
text-decoration:none;
}
.item:hover{
-webkit-animation:swinging 20s ease-in-out 0s infinite;
-moz-animation:swinging 20s ease-in-out 0s infinite;
animation:swinging 20s ease-in-out 0s infinite;
-webkit-transform-origin:50% 0;
-moz-transform-origin:50% 0;
transform-origin:50% 0;
}
@-webkit-keyframes swinging{
0% { -webkit-transform: rotate(0); }
5% { -webkit-transform: rotate(10deg); }
10% { -webkit-transform: rotate(-9deg); }
15% { -webkit-transform: rotate(8deg); }
20% { -webkit-transform: rotate(-7deg); }
25% { -webkit-transform: rotate(6deg); }
30% { -webkit-transform: rotate(-5deg); }
35% { -webkit-transform: rotate(4deg); }
40% { -webkit-transform: rotate(-3deg); }
45% { -webkit-transform: rotate(2deg); }
50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
100% { -webkit-transform: rotate(0); }
}
@-moz-keyframes swinging{
0% { -moz-transform: rotate(0); }
5% { -moz-transform: rotate(10deg); }
10% { -moz-transform: rotate(-9deg); }
15% { -moz-transform: rotate(8deg); }
20% { -moz-transform: rotate(-7deg); }
25% { -moz-transform: rotate(6deg); }
30% { -moz-transform: rotate(-5deg); }
35% { -moz-transform: rotate(4deg); }
40% { -moz-transform: rotate(-3deg); }
45% { -moz-transform: rotate(2deg); }
50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
100% { -moz-transform: rotate(0); }
}
@keyframes swinging{
0% { transform: rotate(0); }
5% { transform: rotate(10deg); }
10% { transform: rotate(-9deg); }
15% { transform: rotate(8deg); }
20% { transform: rotate(-7deg); }
25% { transform: rotate(6deg); }
30% { transform: rotate(-5deg); }
35% { transform: rotate(4deg); }
40% { transform: rotate(-3deg); }
45% { transform: rotate(2deg); }
50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
100% { transform: rotate(0); }
}
</style>
<body>
<div style="line-height: 1.5;color: #000;">
<div id="container">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div id="tpline"> </div>
<div class="item" id="it_bm">
<div class="line vline"> </div>
<div class="ball"><a href="#bm">珍</a></div>
</div>
<div class="item" id="it_ext">
<div class="line vline"> </div>
<div class="ball"><a href="#ext">惜</a></div>
</div>
<div class="item" id="it_cfg">
<div class="line vline"> </div>
<div class="ball"><a href="#cfg">每</a></div>
</div>
<div class="item" id="it_uni">
<div class="line vline"> </div>
<div class="ball"><a href="#uni">一</a></div>
</div>
<div class="item" id="it_uri">
<div class="line vline"> </div>
<div class="ball"><a href="#uri">天</a></div>
</div>
<div class="item" id="it_rtr">
<div class="line vline"> </div>
<div class="ball"><a href="#rtr">I</a></div>
</div>
<div class="item" id="it_out">
<div class="line vline"> </div>
<div class="ball"><a href="#out">LOVE</a></div>
</div>
<div class="item" id="it_sec">
<div class="line vline"> </div>
<div class="ball"><a href="#sec">YOU</a></div>
</div>
</div>
</div>
</body>
</html>
