课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

求大神指教，我的太阳动不了

来源：5-1 太阳动画效果

lyesnake

2015-09-18 11:20

<!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;
            }


            /*---太阳自转以及动画---*/
            #sun{
                background: url("http://img.mukewang.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://img.mukewang.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(){

                      //太阳公转
                      $("#sun").addClass('rotation');

                      boy.walkTo(2000,0.2)
                              .then(function(){
                                  //第一次走路完成
                                  //页面开始滚动
                                  scrollTo(5000,1);
                              }).then(function(){
                                  //第二次走路
                                  return boy.walkTo(5000,0.5);
                              });
                  });




              })

           </script>




       </html>

写回答 关注

2回答

  • echo_kinchao
    2015-09-18 17:04:34

    CSS3动画写错了

    0 0
  • bingkingboy
    2015-09-18 11:48:59

             
                @-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);
                    }
                }

    0 2

H5+JS+CSS3实现七夕言情

为七夕节准备的H5+JS+CSS3特效案例，由浅入深案例拆分讲解

211525 学习 · 540 问题

查看课程

相似问题

太阳没有动

回答 4

太阳动画没有显示

回答 3

太阳样式的位置

回答 1

太阳外部有光圈

回答 1

大神大神，发现个问题

回答 1

打开慕课网App查看更多内容