海盗船长小米首页小船来回摆动CSS3.0效果，偶然之间看到的，就写了一个。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>javascript</title> 6 <style type="text/css"> 7 *{margin:0px;padding:0px;} 8 .bg{height:795px;width:622px;background:url(images/bg.jpg) 0px 0px no-repeat;position:relative;} 9 .xiaoshan{height:795px;width:622px;background:url(images/xiaoshan.png) 0px 0px no-repeat;position:absolute;z-index:3;} 10 .bg .xiaochuan{ 11 width:449px; 12 height:323px; 13 background:url(images/xiaochuan.png) 0px 0px no-repeat; 14 position:absolute; 15 top:373px; 16 left:78px; 17 z-index:2; 18 animation:2.5s ship infinite; 19 -webkit-animation:2.5s ship infinite; 20 -webkit-transform-origin:254px 22px; 21 -ms-transform-origin:254px 22px; 22 transform-origin: 255px 22px;} 23 @keyframes ship { 24 0% { 25 -webkit-transform:rotate(0deg); 26 transform:rotate(0deg); 27 } 28 50% { 29 -webkit-transform:rotate(-60deg); 30 transform:rotate(-60deg); 31 } 32 100% { 33 -webkit-transform:rotate(0deg); 34 transform:rotate(0deg); 35 } 36 } 37 @-webkit-keyframes ship { 38 0% { 39 -webkit-transform:rotate(0deg); 40 transform:rotate(0deg); 41 } 42 50% { 43 -webkit-transform:rotate(-60deg); 44 transform:rotate(-60deg); 45 } 46 100% { 47 -webkit-transform:rotate(0deg); 48 transform:rotate(0deg); 49 } 50 } 51 </style> 52 </head> 53 <body> 54 <div class="bg"> 55 <div class="xiaoshan"></div> 56 <div class="xiaochuan"></div> 57 </div> 58 </body> 59 </html> 60 <script type="text/javascript"> 61 62 63 </script>
效果截图：其实是小船来回摆动的效果。