求大神指教，我的太陽動不了
<!DOCTYPE html>
? ? ? ?<html>
? ? ? ? ? ?<head>
? ? ? ? ? ? ? ?<meta charset="utf-8" http-equiv="content-type" content="text/html">
? ? ? ? ? ? ? ?<title>七夕主題課</title>
? ? ? ? ? ? ? ?<link type="text/css" rel="stylesheet" href="css/qixi.css">
? ? ? ? ? ? ? ?<link type="text/css" rel="stylesheet" href="css/pageA.css">
? ? ? ? <style type="text/css">
? ? ? ? ? ? button {
? ? ? ? ? ? ? ? width: 80px;
? ? ? ? ? ? ? ? height: 50px;
? ? ? ? ? ? }
? ? ? ? ? ? .button {
? ? ? ? ? ? ? ? position: absolute;
? ? ? ? ? ? ? ? bottom: 0;
? ? ? ? ? ? }
? ? ? ? ? ? /*---太陽自轉(zhuǎn)以及動畫---*/
? ? ? ? ? ? #sun{
? ? ? ? ? ? ? ? background: url("http://img1.sycdn.imooc.com//55ade004000106c202010201.png") no-repeat;
? ? ? ? ? ? ? ? position: absolute;
? ? ? ? ? ? ? ? z-index: 1;
? ? ? ? ? ? ? ? top:-30px;
? ? ? ? ? ? ? ? height:201px;
? ? ? ? ? ? ? ? width:201px;
? ? ? ? ? ? ? ? right:40%;
? ? ? ? ? ? }
? ? ? ? ? ? .rotation {
? ? ? ? ? ? ? ? -webkit-animation-name: rotation;
? ? ? ? ? ? ? ? -webkit-animation-duration: 30s;
? ? ? ? ? ? ? ? -moz-animation-name: rotation;
? ? ? ? ? ? ? ? -moz-animation-duration: 30s;
? ? ? ? ? ? }
? ? ? ? ? ? @-webkit-keyframes rotation {
? ? ? ? ? ? ? ? 0% {
? ? ? ? ? ? ? ? ? ? transform: translateX(0) translateY(0);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? @-moz-keyframes rotation {
? ? ? ? ? ? ? ? 100% {
? ? ? ? ? ? ? ? ? ? transform: translateX(-2000px) translateY(400px);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? </style>
? ? ? ? ? ? ? ?<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
? ? ? ? ? ? ? ?<script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
? ? ? ? ? ? ? ?<script type="text/javascript" src="js/Swipe.js"></script>
? ? ? ? ? ? ? ?<script type="text/javascript" src="js/BoyWalk.js"></script>
? ? ? ? ? ?</head>
? ? ? ? ? ?<body>
? ? ? ? ? ?<div id='content'>
? ? ? ? ? ? ? ?<ul class="content-wrap">
? ? ? ? ? ? ? ? ? ?<!--第一幅畫-->
? ? ? ? ? ? ? ? ? ?<li>
? ? ? ? ? ? ? ? ? ? ? ?<div class="a_background">
? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="a_background_top"></div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="a_background_middle"></div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="a_background_bottom"></div>
? ? ? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ? ? ?<!--太陽-->
? ? ? ? ? ? ? ? ? ? ? ?<div id="sun"></div>
? ? ? ? ? ? ? ? ? ?</li>
? ? ? ? ? ? ? ? ? ?<!--第二幅畫-->
? ? ? ? ? ? ? ? ? ?<li>頁面2</li>
? ? ? ? ? ? ? ? ? ?<!--第三幅畫-->
? ? ? ? ? ? ? ? ? ?<li>頁面3</li>
? ? ? ? ? ? ? ?</ul>
? ? ? ? ? ? ? ?<div id="boy" class="charector"></div>
? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div class="button">
? ? ? ? ? ? ? ? ? ?<button>開始</button>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</body>
? ? ? ? ? ?<script type="text/javascript">
? ? ? ? ? ? ? $(function(){
? ? ? ? ? ? ? ? ? var container = $('#content');
? ? ? ? ? ? ? ? ? var swipe = Swipe(container);
? ? ? ? ? ? ? ? ? //頁面翻滾到指定的位置
? ? ? ? ? ? ? ? ? function scrollTo( time,proportionX){
? ? ? ? ? ? ? ? ? ? ? var distX = container.width()* proportionX;
? ? ? ? ? ? ? ? ? ? ? swipe.scrollTo(distX,time);
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ///////////////
? ? ? ? ? ? ? ? ? //== ?動畫處理==//
? ? ? ? ? ? ? ? ? //////////////
? ? ? ? ? ? ? ? ? var boy = BoyWalk();
? ? ? ? ? ? ? ? ? //開始
? ? ? ? ? ? ? ? ? $("button:first").click(function(){
? ? ? ? ? ? ? ? ? ? ? //太陽公轉(zhuǎn)
? ? ? ? ? ? ? ? ? ? ? $("#sun").addClass('rotation');
? ? ? ? ? ? ? ? ? ? ? boy.walkTo(2000,0.2)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .then(function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //第一次走路完成
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //頁面開始滾動
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? scrollTo(5000,1);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }).then(function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //第二次走路
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return boy.walkTo(5000,0.5);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? })
? ? ? ? ? ?</script>
? ? ? ?</html>
2015-09-18
CSS3動畫寫錯了
2015-09-18
?????????
? ? ? ? ? ? @-webkit-keyframes rotation {
? ? ? ? ? ? ? ? 0% {
? ? ? ? ? ? ? ? ? ? transform: translateX(0) translateY(0);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? @-moz-keyframes rotation {
? ? ? ? ? ? ? ? 100% {
? ? ? ? ? ? ? ? ? ? transform: translateX(-2000px) translateY(400px);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
CSS中這部分代碼出了問題！，JS由于是JQuery部分所以沒看（建議去看看CSS3動畫）
????????????@-webkit-keyframes rotation {
? ? ? ? ? ? ? ? 0% {
? ? ? ? ? ? ? ? ? ? transform: translateX(0) translateY(0);
? ? ? ? ? ? ? ? }
????????????????100% {
? ? ? ? ? ? ? ? ? ? transform: translateX(-2000px) translateY(400px);
? ? ? ? ? ? ? ? } ? ? ? ? ? ? }
? ? ? ? ? ? @-moz-keyframes rotation {
????????????????0% {
? ? ? ? ? ? ? ? ? ? transform: translateX(0) translateY(0);
? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? 100% {
? ? ? ? ? ? ? ? ? ? transform: translateX(-2000px) translateY(400px);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }