@charset "UTF-8";
/* CSS Document */

/*============================== 透明度从0到1，渐渐显示 ==============================*/
@keyframes fade_in {
	from { opacity:0;}
	to { opacity:1;}
}
@-webkit-keyframes fade_in {
	from { opacity:0;}
	to { opacity:1;}
}
@-moz-keyframes fade_in {
	from { opacity:0;}
	to { opacity:1;}
}
@-o-keyframes fade_in {
	from { opacity:0;}
	to { opacity:1;}
}

/*============================== 透明度从1到0，渐渐隐藏 ==============================*/
@keyframes fade_out {
	from { opacity:1;}
	to { opacity:0;}
}
@-webkit-keyframes fade_out {
	from { opacity:1;}
	to { opacity:0;}
}
@-moz-keyframes fade_out {
	from { opacity:1;}
	to { opacity:0;}
}
@-o-keyframes fade_out {
	from { opacity:1;}
	to { opacity:0;}
}

/*============================== 由小变大 ==============================*/
@keyframes scale{
    0% { background-size:1px;}
    100% { background-size:100%;}
}
@-webkit-keyframes scale{
    0% { background-size:1px;}
    100% { background-size:100%;}
}
@-moz-keyframes scale{
    0% { background-size:1px;}
    100% { background-size:100%;}
}
@-o-keyframes scale{
    0% { background-size:1px;}
    100% { background-size:100%;}
}


/*============================== section1 ==============================*/
/* 小优出来 */
@keyframes out {
	to { background-position:-640px 0;}
}
@-webkit-keyframes out {
	to { background-position:-640px 0;}
}
@-moz-keyframes out {
	to { background-position:-640px 0;}
}
@-o-keyframes out {
	to { background-position:-640px 0;}
}
/* 小优眨眼 */
@keyframes wink {
	to { background-position:-960px 0;}
}
@-webkit-keyframes wink {
	to { background-position:-960px 0;}
}
@-moz-keyframes wink {
	to { background-position:-960px 0;}
}
@-o-keyframes wink {
	to { background-position:-960px 0;}
}

/*============================== section2 ==============================*/
/* 小优流口水 */
@keyframes drool {
	to { background-position:-950px 0;}
}
@-webkit-keyframes drool {
	to { background-position:-950px 0;}
}
@-moz-keyframes drool {
	to { background-position:-950px 0;}
}
@-o-keyframes drool {
	to { background-position:-950px 0;}
}
/* 四个商品左右晃动 */
@keyframes swing {
	20% {
		-webkit-transform:rotate3d(0, 0, 1, 10deg);
		transform:rotate3d(0, 0, 1, 10deg);
	}
	80% {
		-webkit-transform:rotate3d(0, 0, 1, -10deg);
		transform:rotate3d(0, 0, 1, -10deg);
	}
}
@-webkit-keyframes swing {
	20% {
		-webkit-transform:rotate3d(0, 0, 1, 10deg);
		transform:rotate3d(0, 0, 1, 10deg);
	}
	80% {
		-webkit-transform:rotate3d(0, 0, 1, -10deg);
		transform:rotate3d(0, 0, 1, -10deg);
	}
}
@-moz-keyframes swing {
	20% {
		-webkit-transform:rotate3d(0, 0, 1, 10deg);
		transform:rotate3d(0, 0, 1, 10deg);
	}
	80% {
		-webkit-transform:rotate3d(0, 0, 1, -10deg);
		transform:rotate3d(0, 0, 1, -10deg);
	}
}
@-o-keyframes swing {
	20% {
		-webkit-transform:rotate3d(0, 0, 1, 10deg);
		transform:rotate3d(0, 0, 1, 10deg);
	}
	80% {
		-webkit-transform:rotate3d(0, 0, 1, -10deg);
		transform:rotate3d(0, 0, 1, -10deg);
	}
}

/*============================== section3 ==============================*/
/* 小优披风飘动 */
@keyframes fly {
	to { background-position:-1110px 0;}
}
@-webkit-keyframes fly {
	to { background-position:-1110px 0;}
}
@-moz-keyframes fly {
	to { background-position:-1110px 0;}
}
@-o-keyframes fly {
	to { background-position:-1110px 0;}
}
/*小船由远及近*/
@keyframes move{
    0% {
		top: 1000px;
    right: 289px;
	}
    30% {
		    top: 940px;
    right: 310px;
	}
    60% {
		    top: 863px;
    right: 310px;
	}
    100% {
		top: 800px;
    right: 212px;
	}
}
@-webkit-keyframes move{
    0% {
		top: 1000px;
    right: 289px;
	}
    30% {
		    top: 940px;
    right: 310px;
	}
    60% {
		    top: 863px;
    right: 310px;
	}
    100% {
		top: 800px;
    right: 212px;
	}
   
}
@-moz-keyframes move{
     0% {
		top: 1000px;
    right: 289px;
	}
    30% {
		    top: 940px;
    right: 310px;
	}
    60% {
		    top: 863px;
    right: 310px;
	}
    100% {
		top: 800px;
    right: 212px;
	}
}
@-o-keyframes move{
    0% {
		top: 1000px;
    right: 289px;
	}
    30% {
		    top: 940px;
    right: 310px;
	}
    60% {
		    top: 863px;
    right: 310px;
	}
    100% {
		top: 800px;
    right: 212px;
	}
}
/* 小船上下浮动 */
@keyframes floating {
	0% { 
		transform:translateY(10px);
		-webkit-transform:translateY(10px);
		-moz-transform:translateY(10px);
	}
	25% {
		transform:translateY(20px);
		-webkit-transform:translateY(20px);
		-moz-transform:translateY(20px);
	}
	50% {
		transform:translateY(10px);
		-webkit-transform:translateY(10px);
		-moz-transform:translateY(10px);
	}
	75% {
		transform:translateY(20px);
		-webkit-transform:translateY(20px);
		-moz-transform:translateY(20px);
	}
	100% {
		transform:translateY(10px);
		-webkit-transform:translateY(10px);
		-moz-transform:translateY(10px);
	}
}
@-webkit-keyframes floating {
	0% { 
		transform:translateY(10px);
		-webkit-transform:translateY(10px);
		-moz-transform:translateY(10px);
	}
	25% {
		transform:translateY(20px);
		-webkit-transform:translateY(20px);
		-moz-transform:translateY(20px);
	}
	50% {
		transform:translateY(10px);
		-webkit-transform:translateY(10px);
		-moz-transform:translateY(10px);
	}
	75% {
		transform:translateY(20px);
		-webkit-transform:translateY(20px);
		-moz-transform:translateY(20px);
	}
	100% {
		transform:translateY(10px);
		-webkit-transform:translateY(10px);
		-moz-transform:translateY(10px);
	}
}
@-moz-keyframes floating {
	0% { 
		transform:translateY(10px);
		-webkit-transform:translateY(10px);
		-moz-transform:translateY(10px);
	}
	25% {
		transform:translateY(20px);
		-webkit-transform:translateY(20px);
		-moz-transform:translateY(20px);
	}
	50% {
		transform:translateY(10px);
		-webkit-transform:translateY(10px);
		-moz-transform:translateY(10px);
	}
	75% {
		transform:translateY(20px);
		-webkit-transform:translateY(20px);
		-moz-transform:translateY(20px);
	}
	100% {
		transform:translateY(10px);
		-webkit-transform:translateY(10px);
		-moz-transform:translateY(10px);
	}
}
@-o-keyframes floating {
	0% { 
		transform:translateY(10px);
		-webkit-transform:translateY(10px);
		-moz-transform:translateY(10px);
	}
	25% {
		transform:translateY(20px);
		-webkit-transform:translateY(20px);
		-moz-transform:translateY(20px);
	}
	50% {
		transform:translateY(10px);
		-webkit-transform:translateY(10px);
		-moz-transform:translateY(10px);
	}
	75% {
		transform:translateY(20px);
		-webkit-transform:translateY(20px);
		-moz-transform:translateY(20px);
	}
	100% {
		transform:translateY(10px);
		-webkit-transform:translateY(10px);
		-moz-transform:translateY(10px);
	}
}
/*宝箱摇晃*/
@keyframes shake{
    0% {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(-5deg);
        -o-transform:rotate(-5deg);
    }
    20% {
        transform:rotate(-5deg);
        -webkit-transform:rotate(-5deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
    40% {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(5deg);
        -o-transform:rotate(5deg);
    }
    60% {
        transform:rotate(5deg);
        -webkit-transform:rotate(5deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
    80% {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(-5deg);
        -o-transform:rotate(-5deg);
    }
    100% {
        transform:rotate(-5deg);
        -webkit-transform:rotate(-5deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
}
@-webkit-keyframes shake{
    0% {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(-5deg);
        -o-transform:rotate(-5deg);
    }
    20% {
        transform:rotate(-5deg);
        -webkit-transform:rotate(-5deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
    40% {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(5deg);
        -o-transform:rotate(5deg);
    }
    60% {
        transform:rotate(5deg);
        -webkit-transform:rotate(5deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
    80% {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(-5deg);
        -o-transform:rotate(-5deg);
    }
    100% {
        transform:rotate(-5deg);
        -webkit-transform:rotate(-5deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
}
@-moz-keyframes shake{
    0% {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(-5deg);
        -o-transform:rotate(-5deg);
    }
    20% {
        transform:rotate(-5deg);
        -webkit-transform:rotate(-5deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
    40% {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(5deg);
        -o-transform:rotate(5deg);
    }
    60% {
        transform:rotate(5deg);
        -webkit-transform:rotate(5deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
    80% {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(-5deg);
        -o-transform:rotate(-5deg);
    }
    100% {
        transform:rotate(-5deg);
        -webkit-transform:rotate(-5deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
}
@-o-keyframes shake{
    0% {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(-5deg);
        -o-transform:rotate(-5deg);
    }
    20% {
        transform:rotate(-5deg);
        -webkit-transform:rotate(-5deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
    40% {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(5deg);
        -o-transform:rotate(5deg);
    }
    60% {
        transform:rotate(5deg);
        -webkit-transform:rotate(5deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
    80% {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(-5deg);
        -o-transform:rotate(-5deg);
    }
    100% {
        transform:rotate(-5deg);
        -webkit-transform:rotate(-5deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
}

/*============================== section4 ==============================*/
/* 小优唱歌的嘴 */
@keyframes sing {
	to { background-position:-664px 0;}
}
@-webkit-keyframes sing {
	to { background-position:-664px 0;}
}
@-moz-keyframes sing {
	to { background-position:-664px 0;}
}
@-o-keyframes sing {
	to { background-position:-664px 0;}
}
/* 左边灯光 */
@keyframes light_l {
    from { transform:rotate(-6deg);}
	to { transform:rotate(6deg);}
}
@-moz-keyframes light_l {
    from { transform:rotate(-6deg);}
	to { transform:rotate(6deg);}
}
@-webkit-keyframes light_l {
    from { transform:rotate(-6deg);}
	to { transform:rotate(6deg);}
}
@-o-keyframes light_l {
    from { transform:rotate(-6deg);}
	to { transform:rotate(6deg);}
}
/* 右边灯光 */
@keyframes light_r {
    from { transform:rotate(6deg);}
    to { transform:rotate(-6deg);}
}
@-moz-keyframes light_r {
    from { transform:rotate(6deg);}
    to { transform:rotate(-6deg);}
}
@-webkit-keyframes light_r {
    from { transform:rotate(6deg);}
    to { transform:rotate(-6deg);}
}
@-o-keyframes light_r {
    from { transform:rotate(6deg);}
    to { transform:rotate(-6deg);}
}
/* 绿色音符 */
@keyframes music_g {
    0%{
        transform:translate(-61px,338px);
        background-size:0;
        opacity:0;
    }
    16%{
        transform:translate(-79px,277px);
        background-size:32%;
        opacity:0.32;
    }
    23%{
        transform:translate(-81px,252px);
        background-size:46%;
        opacity:0.46;
    }
    30%{
        transform:translate(-79px,222px);
        background-size:60%;
        opacity:0.6;
    }
    40%{
        transform:translate(-72px,192px);
        background-size:80%;
        opacity:0.8;
    }
    50%{
        transform:translate(-59px,156px);
        background-size:100%;
        opacity:1;
    }
    75%{
         transform:translate(-15px,51px);
        background-size:50%;
        opacity:0.5;
     }
    83%{
        transform:translate(-8px,19px);
        background-size:34%;
        opacity:0.34;
    }
    88%{
        transform:translate(-6px,-3px);
        background-size:24%;
        opacity:0.24;
    }
    100%{
        transform:translate(-9px,-36px);
        background-size:0;
        opacity:0;
    }
}
@-moz-keyframes music_g {
    0%{
        -moz-transform:translate(-61px,338px);
        background-size:0;
        opacity:0;
    }
    16%{
        -moz-transform:translate(-79px,277px);
        background-size:32%;
        opacity:0.32;
    }
    23%{
        -moz-transform:translate(-81px,252px);
        background-size:46%;
        opacity:0.46;
    }
    30%{
        -moz-transform:translate(-79px,222px);
        background-size:60%;
        opacity:0.6;
    }
    40%{
        -moz-transform:translate(-72px,192px);
        background-size:80%;
        opacity:0.8;
    }
    50%{
        -moz-transform:translate(-59px,156px);
        background-size:100%;
        opacity:1;
    }
    75%{
        -moz-transform:translate(-15px,51px);
        background-size:50%;
        opacity:0.5;
    }
    83%{
        -moz-transform:translate(-8px,19px);
        background-size:34%;
        opacity:0.34;
    }
    88%{
        -moz-transform:translate(-6px,-3px);
        background-size:24%;
        opacity:0.24;
    }
    100%{
        -moz-transform:translate(-9px,-36px);
        background-size:0;
        opacity:0;
    }
}
@-webkit-keyframes music_g {
    0%{
        -webkit-transform:translate(-61px,338px);
        background-size:0;
        opacity:0;
    }
    16%{
        -webkit-transform:translate(-79px,277px);
        background-size:32%;
        opacity:0.32;
    }
    23%{
        -webkit-transform:translate(-81px,252px);
        background-size:46%;
        opacity:0.46;
    }
    30%{
        -webkit-transform:translate(-79px,222px);
        background-size:60%;
        opacity:0.6;
    }
    40%{
        -webkit-transform:translate(-72px,192px);
        background-size:80%;
        opacity:0.8;
    }
    50%{
        -webkit-transform:translate(-59px,156px);
        background-size:100%;
        opacity:1;
    }
    75%{
        -webkit-transform:translate(-15px,51px);
        background-size:50%;
        opacity:0.5;
    }
    83%{
        -webkit-transform:translate(-8px,19px);
        background-size:34%;
        opacity:0.34;
    }
    88%{
        -webkit-transform:translate(-6px,-3px);
        background-size:24%;
        opacity:0.24;
    }
    100%{
        -webkit-transform:translate(-9px,-36px);
        background-size:0;
        opacity:0;
    }
}
@-o-keyframes music_g {
    0%{
        -o-transform:translate(-61px,338px);
        background-size:0;
        opacity:0;
    }
    16%{
        -o-transform:translate(-79px,277px);
        background-size:32%;
        opacity:0.32;
    }
    23%{
        -o-transform:translate(-81px,252px);
        background-size:46%;
        opacity:0.46;
    }
    30%{
        -o-transform:translate(-79px,222px);
        background-size:60%;
        opacity:0.6;
    }
    40%{
        -o-transform:translate(-72px,192px);
        background-size:80%;
        opacity:0.8;
    }
    50%{
        -o-transform:translate(-59px,156px);
        background-size:100%;
        opacity:1;
    }
    75%{
        -o-transform:translate(-15px,51px);
        background-size:50%;
        opacity:0.5;
    }
    83%{
        -o-transform:translate(-8px,19px);
        background-size:34%;
        opacity:0.34;
    }
    88%{
        -o-transform:translate(-6px,-3px);
        background-size:24%;
        opacity:0.24;
    }
    100%{
        -o-transform:translate(-9px,-36px);
        background-size:0;
        opacity:0;
    }
}
/* 蓝色音符 */
@keyframes music_b {
    33%{
        transform:translate(30px,130px);
        background-size:0;
        opacity:0;
    }
    48%{
        transform:translate(5px,77px);
        background-size:23%;
        opacity:0.23;
    }
    57%{
        transform:translate(-2px,55px);
        background-size:36%;
        opacity:0.36;
    }
    64%{
        transform:translate(-8px,31px);
        background-size:46%;
        opacity:0.46;
    }
    66%{
        transform:translate(-8px,15px);
        background-size:50%;
        opacity:0.5;
    }
    77%{
        transform:translate(-6px,-25px);
        background-size:66%;
        opacity:1;
    }
    88%{
        transform:translate(-4px,-64px);
        background-size:83%;
        opacity:0.83;
    }
    95%{
        transform:translate(-8px,-81px);
        background-size:93%;
        opacity:0.66;
    }
    97%{
        transform:translate(-13px,-89px);
        background-size:96%;
        opacity:0.33;
    }
    100%{
        transform:translate(-19px,-95px);
        background-size:100%;
        opacity:0;
    }
}
@-moz-keyframes music_b {
    33%{
        -moz-transform:translate(30px,130px);
        background-size:0;
        opacity:0;
    }
    48%{
        -moz-transform:translate(5px,77px);
        background-size:23%;
        opacity:0.23;
    }
    57%{
        -moz-transform:translate(-2px,55px);
        background-size:36%;
        opacity:0.36;
    }
    64%{
        -moz-transform:translate(-8px,31px);
        background-size:46%;
        opacity:0.46;
    }
    66%{
        -moz-transform:translate(-8px,15px);
        background-size:50%;
        opacity:0.5;
    }
    77%{
        -moz-transform:translate(-6px,-25px);
        background-size:66%;
        opacity:1;
    }
    88%{
        transform:translate(-4px,-64px);
        background-size:83%;
        opacity:0.83;
    }
    95%{
        transform:translate(-8px,-81px);
        background-size:93%;
        opacity:0.66;
    }
    97%{
        transform:translate(-13px,-89px);
        background-size:96%;
        opacity:0.33;
    }
    100%{
        transform:translate(-19px,-95px);
        background-size:100%;
        opacity:0;
    }
}
@-webkit-keyframes music_b {
    33%{
        -webkit-transform:translate(30px,130px);
        background-size:0;
        opacity:0;
    }
    48%{
        -webkit-transform:translate(5px,77px);
        background-size:23%;
        opacity:0.23;
    }
    57%{
        -webkit-transform:translate(-2px,55px);
        background-size:36%;
        opacity:0.36;
    }
    64%{
        -webkit-transform:translate(-8px,31px);
        background-size:46%;
        opacity:0.46;
    }
    66%{
        -webkit-transform:translate(-8px,15px);
        background-size:50%;
        opacity:0.5;
    }
    77%{
        -webkit-transform:translate(-6px,-25px);
        background-size:66%;
        opacity:1;
    }
    88%{
        transform:translate(-4px,-64px);
        background-size:83%;
        opacity:0.83;
    }
    95%{
        transform:translate(-8px,-81px);
        background-size:93%;
        opacity:0.66;
    }
    97%{
        transform:translate(-13px,-89px);
        background-size:96%;
        opacity:0.33;
    }
    100%{
        transform:translate(-19px,-95px);
        background-size:100%;
        opacity:0;
    }
}
@-o-keyframes music_b {
    33%{
        -o-transform:translate(30px,130px);
        background-size:0;
        opacity:0;
    }
    48%{
        -o-transform:translate(5px,77px);
        background-size:23%;
        opacity:0.23;
    }
    57%{
        -o-transform:translate(-2px,55px);
        background-size:36%;
        opacity:0.36;
    }
    64%{
        -o-transform:translate(-8px,31px);
        background-size:46%;
        opacity:0.46;
    }
    66%{
        -o-transform:translate(-8px,15px);
        background-size:50%;
        opacity:0.5;
    }
    77%{
        -o-transform:translate(-6px,-25px);
        background-size:66%;
        opacity:1;
    }
    88%{
        transform:translate(-4px,-64px);
        background-size:83%;
        opacity:0.83;
    }
    95%{
        transform:translate(-8px,-81px);
        background-size:93%;
        opacity:0.66;
    }
    97%{
        transform:translate(-13px,-89px);
        background-size:96%;
        opacity:0.33;
    }
    100%{
        transform:translate(-19px,-95px);
        background-size:100%;
        opacity:0;
    }
}
/* 粉色音符 */
@keyframes music_p {
    77%{
        transform:translate(43px,40px);
        background-size:0;
        opacity:0;
    }
    80%{
        transform:translate(27px,32px);
        background-size:15%;
        opacity:0.15;
    }
    88%{
        transform:translate(1px,2px);
        background-size:50%;
        opacity:0.5;
    }
    95%{
        transform:translate(-20px,-26px);
        background-size:80%;
        opacity:1;
    }
    98%{
        transform:translate(-33px,-38px);
        background-size:95%;
        opacity:0.7;
    }
    100%{
        transform:translate(-40px,-40px);
        background-size:100%;
        opacity:0;
    }
}
@-moz-keyframes music_p {
    77%{
        -moz-transform:translate(43px,40px);
        background-size:0;
        opacity:0;
    }
    80%{
        -moz-transform:translate(27px,32px);
        background-size:15%;
        opacity:0.15;
    }
    88%{
        -moz-transform:translate(1px,2px);
        background-size:50%;
        opacity:0.5;
    }
    95%{
        -moz-transform:translate(-20px,-26px);
        background-size:80%;
        opacity:1;
    }
    98%{
        transform:translate(-33px,-38px);
        background-size:95%;
        opacity:0.7;
    }
    100%{
        transform:translate(-40px,-40px);
        background-size:100%;
        opacity:0;
    }
}
@-webkit-keyframes music_p {
    77%{
        -webkit-transform:translate(43px,40px);
        background-size:0;
        opacity:0;
    }
    80%{
        -webkit-transform:translate(27px,32px);
        background-size:15%;
        opacity:0.15;
    }
    88%{
        -webkit-transform:translate(1px,2px);
        background-size:50%;
        opacity:0.5;
    }
    95%{
        -webkit-transform:translate(-20px,-26px);
        background-size:80%;
        opacity:1;
    }
    98%{
        transform:translate(-33px,-38px);
        background-size:95%;
        opacity:0.7;
    }
    100%{
        transform:translate(-40px,-40px);
        background-size:100%;
        opacity:0;
    }
}
@-o-keyframes music_p {
    77%{
        -o-transform:translate(43px,40px);
        background-size:0;
        opacity:0;
    }
    80%{
        -o-transform:translate(27px,32px);
        background-size:15%;
        opacity:0.15;
    }
    88%{
        -o-transform:translate(1px,2px);
        background-size:50%;
        opacity:0.5;
    }
    95%{
        -o-transform:translate(-20px,-26px);
        background-size:80%;
        opacity:1;
    }
    98%{
        transform:translate(-33px,-38px);
        background-size:95%;
        opacity:0.7;
    }
    100%{
        transform:translate(-40px,-40px);
        background-size:100%;
        opacity:0;
    }
}
/* 紫色音符 */
@keyframes music_pur {
    0%{
        transform:translate(-47px,54px);
        opacity:0;
    }
    13%{
        transform:translate(-27px,43px);
        opacity:0.3;
    }
    36%{
        transform:translate(-12px,16px);
        opacity:0.7;
    }
    52%{
        transform:translate(3px,-1px);
        opacity:0.82;
    }
    58%{
        transform:translate(8px,-9px);
        opacity:1;
    }
    69%{
        transform:translate(21px,-26px);
        opacity:0.8;
    }
    81%{
        transform:translate(41px,-42px);
        opacity:0.4;
    }
    100%{
        transform:translate(71px,-56px);
        opacity:0;
    }
}
@-moz-keyframes music_pur {
    0%{
        -moz-transform:translate(-47px,54px);
        opacity:0;
    }
    13%{
        -moz-transform:translate(-27px,43px);
        opacity:0.13;
    }
    36%{
        -moz-transform:translate(-12px,16px);
        opacity:0.36;
    }
    52%{
        -moz-transform:translate(3px,-1px);
        opacity:0.52;
    }
    58%{
        -moz-transform:translate(8px,-9px);
        opacity:0.58;
    }
    69%{
        -moz-transform:translate(21px,-26px);
        opacity:0.69;
    }
    81%{
        -moz-transform:translate(41px,-42px);
        opacity:0.81;
    }
    100%{
        -moz-transform:translate(71px,-56px);
        opacity:1;
    }
}
@-webkit-keyframes music_pur {
    0%{
        -webkit-transform:translate(-47px,54px);
        opacity:0;
    }
    13%{
        -webkit-transform:translate(-27px,43px);
        opacity:0.13;
    }
    36%{
        -webkit-transform:translate(-12px,16px);
        opacity:0.36;
    }
    52%{
        -webkit-transform:translate(3px,-1px);
        opacity:0.52;
    }
    58%{
        -webkit-transform:translate(8px,-9px);
        opacity:0.58;
    }
    69%{
        -webkit-transform:translate(21px,-26px);
        opacity:0.69;
    }
    81%{
        -webkit-transform:translate(41px,-42px);
        opacity:0.81;
    }
    100%{
        -webkit-transform:translate(71px,-56px);
        opacity:1;
    }
}
@-o-keyframes music_pur {
    0%{
        -o-transform:translate(-47px,54px);
        opacity:0;
    }
    13%{
        -o-transform:translate(-27px,43px);
        opacity:0.13;
    }
    36%{
        -o-transform:translate(-12px,16px);
        opacity:0.36;
    }
    52%{
        -o-transform:translate(3px,-1px);
        opacity:0.52;
    }
    58%{
        -o-transform:translate(8px,-9px);
        opacity:0.58;
    }
    69%{
        -o-transform:translate(21px,-26px);
        opacity:0.69;
    }
    81%{
        transform:translate(41px,-42px);
        opacity:0.81;
    }
    100%{
        -o-transform:translate(71px,-56px);
        opacity:1;
    }
}

/*============================== section5-旋转的太阳 ==============================*/
@keyframes sun {
    from { transform:rotateZ(0deg);}
    50% { transform:rotateZ(180deg);}
    to { transform:rotateZ(360deg);}
}
@-webkit-keyframes sun {
    from { -webkit-transform:rotateZ(0deg);}
    50% { -webkit-transform:rotateZ(180deg);}
    to { -webkit-transform:rotateZ(360deg);}
}
@-moz-keyframes sun {
    from { -moz-transform:rotateZ(0deg);}
    50% { -moz-transform:rotateZ(180deg);}
    to { -moz-transform:rotateZ(360deg);}
}
@-o-keyframes sun {
    from { -o-transform:rotateZ(0deg);}
    50% { -o-transform:rotateZ(180deg);}
    to { -o-transform:rotateZ(360deg);}
}