pageC.css部分代碼，只粘貼了星星的那部分：/*星星*/.stars{ ? ?width: 100%; ? ?height: 100%; ? ?position: absolute;}.stars > li { ? ?position: absolute; ? ?width: 30px; ? ?height: 31px; ? ?background-image: url("../images/stars.png"); ? ?-webkit-animation-name: flash; ? ?-webkit-animation-direction: alternate; ? ?-webkit-animation-timing-function: ease-in-out; ? ?-webkit-animation-iteration-count: infinite; ? ?-moz-animation-name: flash; ? ?-moz-animation-direction: alternate; ? ?-moz-animation-timing-function: ease-in-out; ? ?-moz-animation-iteration-count: infinite;}.stars1 { ? ?top: 20%; ? ?left: 30%; ? ?-webkit-animation-duration: 5s; ? ?-moz-animation-duration: 5s;}.stars2 { ? ?top: 15%; ? ?left: 20%; ? ?-webkit-animation-duration: 4s; ? ?-moz-animation-duration: 4s;}.stars3 { ? ?top: 25%; ? ?left: 85%; ? ?-webkit-animation-duration: 3s; ? ?-moz-animation-duration: 3s;}.stars4 { ? ?top: 30%; ? ?left: 70%; ? ?-webkit-animation-duration: 7s; ? ?-moz-animation-duration: 7s;}.stars5 { ? ?top: 25%; ? ?left: 20%; ? ?-webkit-animation-duration: 6s; ? ?-moz-animation-duration: 6s;}.stars6 { ? ?top: 10%; ? ?left: 65%; ? ?-webkit-animation-duration: 5s; ? ?-moz-animation-duration: 5s;}@-webkit-keyframes flash { ? ?0%,50%,100%{ ? ? ? ?opacity: 0; ? ?} ? ?25%,75%{ ? ? ? ?opacity: 1; ? ?} }@-moz-keyframes flash { ? ?0%,50%,100%{ ? ? ? ?opacity: 0; ? ?} ? ?25%,75%{ ? ? ? ?opacity: 1; ? ?}}js：/** * Created by Administrator on 2016/8/4. *///////////// 燈動(dòng)畫(huà) ////////////var lamp = { ? ?elem: $(".b_background"), ? ?bright: function(){ ? ? ? ?this.elem.addClass("lamp-bright") ? ?}, ? ?dark: function(){ ? ? ? ?this.elem.removeClass("lamp-bright") ? ?}};var container = $("#content");var swipe = Swipe(container);visualWidth = container.width();visualHeight = container.height();//頁(yè)面滾動(dòng)到指定位置function scrollTo(time, proportionX) { ? ?var distX = container.width() * proportionX; ? ?swipe.scrollTo(distX, time);}//獲取數(shù)據(jù)var getValue = function(classname){ ? ?var $elem = $(""+ classname +""); ? ?//走路的路線(xiàn)坐標(biāo) ? ?return { ? ? ? ?height: $elem.height(), ? ? ? ?top: $elem.position().top ? ?}};//路的Y軸//var pathY = function(){// ? ?var data = getValue(".a_background_middle");// ? ?return data.top + data.height/2;//}();// 橋的Y軸var bridgeY = function(){ ? ?var data = getValue(".c_background_middle"); ? ?return data.top;}();//////////// 小女孩 ////////////var girl = { ? ?elem: $(".girl"), ? ?getHeight:function(){ ? ? ? ?return this.elem.height(); ? ?}, ? ?setOffset: function(){ ? ? ? ?this.elem.css({ ? ? ? ? ? ?left: visualWidth/2, ? ? ? ? ? ?top: bridgeY - this.getHeight() ? ? ? ?}); ? ?}}//修正小女孩的位置girl.setOffset();//////////////////////////////////////////////////////////=================== 動(dòng)畫(huà)處理 ====================== //////////////////////////////////////////////////////////// 用來(lái)臨時(shí)調(diào)整頁(yè)面swipe.scrollTo(visualWidth*2, 0);function doorAction(left, right, time) { ? ?var $door = $(".door"); ? ?var doorLeft = $(".door-left"); ? ?var doorRight = $(".door-right"); ? ?var defer = $.Deferred(); ? ?var count = 2; ? ?// 等待開(kāi)門(mén)完成 ? ?var complete = function() { ? ? ? ?if (count == 1) { ? ? ? ? ? ?defer.resolve(); ? ? ? ? ? ?return; ? ? ? ?} ? ? ? ?count--; ? ?}; ? ?doorLeft.transition({"left": left}, time,complete); ? ?doorRight.transition({"left": right}, time, complete); ? ?return defer;}//開(kāi)門(mén)function openDoor() { ? ?return doorAction("-50%", "100%", 2000);}//關(guān)門(mén)function shutDoor() { ? ?return doorAction("0%", "50%", 2000);}var instanceX;//小孩走路function BoyWalk(){ ? ?var container = $("#content"); ? ?//頁(yè)面可視區(qū)域 ? ?var visualWidth = container.width(); ? ?var visualHeight = container.height(); ? ?//獲取數(shù)據(jù) ? ?var getValue = function(classname){ ? ? ? ?var $elem = $(""+ classname +""); ? ? ? ?//走路的路線(xiàn)坐標(biāo) ? ? ? ?return { ? ? ? ? ? ?height: $elem.height(), ? ? ? ? ? ?top: $elem.position().top ? ? ? ?} ? ?};//路的Y軸var pathY = function(){ ? ?var data = getValue(".a_background_middle"); ? ?return data.top + data.height/2;}();var $boy = $("#boy");var boyWidth = $boy.width();var boyHeight = $boy.height();//修正小男孩的位置$boy.css({ ? ?top: pathY - boyHeight +25});//暫停走路function pauseWalk(){ ? ?$boy.addClass("pauseWalk");}// 恢復(fù)走路function restoreWalk(){ ? ?$boy.removeClass("pauseWalk");}//css3的動(dòng)作變化function slowWalk(){ ? ?$boy.addClass("slowWalk");}//用transition做運(yùn)動(dòng)function stratRun(options,runTime){ ? ?var dfdPlay = $.Deferred(); ? ?//恢復(fù)走路 ? ?restoreWalk(); ? ?$boy.transition( ? ? ? ?options, ? ? ? ?runTime, ? ? ? ?"linear", ? ? ? ?function(){ ? ? ? ? ? ?dfdPlay.resolve(); //動(dòng)畫(huà)完成 ? ? ? ?}); ? ?return dfdPlay;}//開(kāi)始走路function walkRun(time,dist,disY){ ? ?time = time || 3000; ? ?//腳動(dòng)作 ? ?slowWalk(); ? ?//開(kāi)始走路 ? ?var d1 = stratRun({"left": dist + "px","top": disY ? disY:undefined},time); ? ?return d1;} ? ?//走進(jìn)商店function walkToShop(runTime){ ? ?var defer = $.Deferred(); ? ?var doorObj = $(".door"); ? ?//門(mén)坐標(biāo) ? ?var offserDoor = doorObj.offset(); ? ?var doorOffsetLeft = offserDoor.left; ? ?var doorOffsetTop = offserDoor.top; ? ?//小孩當(dāng)前的坐標(biāo) ? ?var offsetBoy = $boy.offset(); ? ?var boyOffsetLeft = offsetBoy.left; ? ?var boyPoxLeft = offsetBoy.left; ? ?var boyPoxTop = offsetBoy.top; ? ?//中間位置 ? ?var boyMiddle = $boy.width()/2; ? ?var doorMiddle = doorObj.width()/2; ? ?var doorTopMiddle = doorObj.height()/2; ? ?//當(dāng)前需要移動(dòng)的坐標(biāo) ? ?instanceX = (doorOffsetLeft+ doorMiddle)-(boyPoxLeft + boyMiddle); ? ?//Y的坐標(biāo) ? ?// top= 人物底部的top- 門(mén)中間的top值 ? ?instanceY = boyPoxTop + boyHeight - doorOffsetTop + (doorTopMiddle); ? ?//開(kāi)始走路 ? ?var walkPlay = stratRun({transform:'translateX('+ instanceX +'px),translateY(-'+ instanceY +'px),scale(0.5,0.5)',opacity:0.1},2000); ? ?//走路完畢 ? ?walkPlay.done(function(){ ? ? ? ?$boy.css({ ? ? ? ? ? ?opacity:0 ? ? ? ?}) ? ? ? ?defer.resolve(); ? ?}) ? ?return defer;} ? ?//走出店function walkOutShop(runTime){ ? ?var defer = $.Deferred(); ? ?restoreWalk(); ? ?//開(kāi)始走路 ? ?var walkPlay = stratRun({transform:'translateX('+ instanceX + 'px),translateY(0),scale(1,1)',opacity:1 },runTime); ? ?//走路完畢 ? ?walkPlay.done(function(){ ? ? ? ?$boy.css({ ? ? ? ? ? ?opacity:1 ? ? ? ?}) ? ? ? ?defer.resolve(); ? ?}) ? ?return defer;}// 取花 ? ?function talkFlower() { ? ? ? ?// 增加延時(shí)等待效果 ? ? ? ?var defer = $.Deferred(); ? ? ? ?setTimeout(function() { ? ? ? ? ? ?// 取花 ? ? ? ? ? ?$boy.addClass('slowFlolerWalk'); ? ? ? ? ? ?defer.resolve(); ? ? ? ?}, 1000); ? ? ? ?return defer; ? ?}//計(jì)算移動(dòng)距離function calculateDist(direction,proportion){ ? ?return (direction == "x" ? visualWidth : visualHeight)*proportion;} ? ?return { ? ? ? ?//開(kāi)始走路 ? ? ? ?walkTo:function(time,proportionX,proportionY){ ? ? ? ? ? ?var distX = calculateDist("x",proportionX); ? ? ? ? ? ?var distY = calculateDist("y",proportionY); ? ? ? ? ? ?return walkRun(time,distX,distY); ? ? ? ?}, ? ? ? ?//走進(jìn)商店 ? ? ? ?toShop: function(){ ? ? ? ? ? ?return walkToShop.apply(null,arguments); ? ? ? ?}, ? ? ? ?outShop: function(){ ? ? ? ? ? ?return walkOutShop.apply(null,arguments); ? ? ? ?}, ? ? ? ?//停止走路 ? ? ? ?stopWalk:function(){ ? ? ? ? ? ?pauseWalk(); ? ? ? ?}, ? ? ? ?setColoer:function(value){ ? ? ? ? ? ?$boy.css("background-color",value); ? ? ? ?}, ? ? ? ?// 獲取男孩的寬度 ? ? ? ?getWidth: function(){ ? ? ? ? ? ?return $boy.width(); ? ? ? ?}, ? ? ? ?// 復(fù)位初始狀態(tài) ? ? ? ?resetOriginal: function(){ ? ? ? ? ? ?this.stopWalk(); ? ? ? ? ? ?// 恢復(fù)圖片 ? ? ? ? ? ?$boy.removeClass("slowWalk slowFlolerWalk").addClass("boyOriginal"); ? ? ? ?}, ? ? ? ?setFlolerWalk:function(){ ? ? ? ? ? ?$boy.addClass("slowFlolerWalk"); ? ? ? ?} ? ? ? ?//talkFlower:function(){ ? ? ? ?// ? ?return talkFlower(); ? ? ? ?//} ? ?}};在瀏覽器中瀏覽的效果：