星星铺满整个屏幕了，没找到问题所在处

Question

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.
 */
//////////
// 灯动画 //
//////////
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();

//页面滚动到指定位置
function scrollTo(time, proportionX) {
    var distX = container.width() * proportionX;
    swipe.scrollTo(distX, time);
}

//获取数据
var getValue = function(classname){
    var $elem = $(""+ classname +"");
    //走路的路线坐标
    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();

////////////////////////////////////////////////////////
//=================== 动画处理 ====================== //
////////////////////////////////////////////////////////

// 用来临时调整页面
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;
    // 等待开门完成
    var complete = function() {
        if (count == 1) {
            defer.resolve();
            return;
        }
        count--;
    };
    doorLeft.transition({"left": left}, time,complete);
    doorRight.transition({"left": right}, time, complete);
    return defer;
}

//开门
function openDoor() {
    return doorAction("-50%", "100%", 2000);
}

//关门
function shutDoor() {
    return doorAction("0%", "50%", 2000);
}

var instanceX;

//小孩走路
function BoyWalk(){

    var container = $("#content");
    //页面可视区域
    var visualWidth = container.width();
    var visualHeight = container.height();

    //获取数据
    var getValue = function(classname){
        var $elem = $(""+ classname +"");
        //走路的路线坐标
        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");
}
// 恢复走路
function restoreWalk(){
    $boy.removeClass("pauseWalk");
}
//css3的动作变化
function slowWalk(){
    $boy.addClass("slowWalk");
}
//用transition做运动
function stratRun(options,runTime){
    var dfdPlay = $.Deferred();
    //恢复走路
    restoreWalk();
    $boy.transition(
        options,
        runTime,
        "linear",
        function(){
            dfdPlay.resolve(); //动画完成
        });
    return dfdPlay;
}
//开始走路
function walkRun(time,dist,disY){
    time = time || 3000;
    //脚动作
    slowWalk();
    //开始走路
    var d1 = stratRun({"left": dist + "px","top": disY ? disY:undefined},time);
    return d1;
}
    //走进商店
function walkToShop(runTime){
    var defer = $.Deferred();
    var doorObj = $(".door");
    //门坐标
    var offserDoor = doorObj.offset();
    var doorOffsetLeft = offserDoor.left;
    var doorOffsetTop = offserDoor.top;
    //小孩当前的坐标
    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;

    //当前需要移动的坐标
    instanceX = (doorOffsetLeft+ doorMiddle)-(boyPoxLeft + boyMiddle);

    //Y的坐标
    // top= 人物底部的top- 门中间的top值
    instanceY = boyPoxTop + boyHeight - doorOffsetTop + (doorTopMiddle);

    //开始走路
    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();
    //开始走路
    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() {
        // 增加延时等待效果
        var defer = $.Deferred();
        setTimeout(function() {
            // 取花
            $boy.addClass('slowFlolerWalk');
            defer.resolve();
        }, 1000);
        return defer;
    }

//计算移动距离
function calculateDist(direction,proportion){
    return (direction == "x" ? visualWidth : visualHeight)*proportion;
}

    return {
        //开始走路
        walkTo:function(time,proportionX,proportionY){
            var distX = calculateDist("x",proportionX);
            var distY = calculateDist("y",proportionY);
            return walkRun(time,distX,distY);
        },
        //走进商店
        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();
        },
        // 复位初始状态
        resetOriginal: function(){
            this.stopWalk();
            // 恢复图片
            $boy.removeClass("slowWalk slowFlolerWalk").addClass("boyOriginal");
        },
        setFlolerWalk:function(){
            $boy.addClass("slowFlolerWalk");
        }
        //talkFlower:function(){
        //    return talkFlower();
        //}
    }
};

在浏览器中浏览的效果：

Answer 1

在浏览器中浏览的效果：