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