web-website/public/static/css/mubu2017.css

html,body,div,p,span,h1,h2,h3,h4,p,a, em,font,img,strong,dl,dt,dd,ul,li{margin:0; padding:0; font-family:"Microsoft YaHei";}
html,body{height:100%; font-size:12px;}    
ul,ol{list-style:none;}
ul li{list-style-type:none;}
img{border:0;}    
em,i{font-style:normal;}
.f_r,.fr{float:right;}
.f_l,.fl{float:left;}
canvas { cursor:crosshair; display:block;}
.mubu{ background:url(../images/mubu_1_s.jpg) no-repeat top center; min-width:960px;height:99.9%;}
.mubu_main{ width:960px; margin:0 auto; text-align:center; padding-top:300px; }
.mubu_main h1{ font-size:50px; color:#f1ea2e; text-shadow:2px 2px 5px #000; line-height:1.5em; height:1.5em; overflow:hidden;}
.mubu_main h2{ font-size:40px; color:#f1ea2e; text-shadow:2px 2px 5px #000; line-height:1.5em; height:1.5em; overflow:hidden; margin-bottom:30px;}
.mubu_main p{ font-size:24px; line-height:1.5em; height:1.5em; overflow:hidden; color:#fff; text-shadow:2px 2px 5px #000;}
.mubu_main p.into{ margin-top:50px; height:120px;}
.mubu_top{ background:url(../images/mubu_2_s.png) no-repeat top center; position:fixed; top:0; left:0; height:150px; width:100%;}
.mubu_left{ background:url(../images/mubu_left_s.jpg) no-repeat; width:720px; height:100%; position:fixed; top:0; left:-720px; -webkit-animation:mubu_dh_1 5s linear; animation:mubu_dh_1 8s linear forwards; display:none\9;}
.mubu_right{ background:url(../images/mubu_right_s.jpg) no-repeat; width:720px; height:100%; position:fixed; top:0; right:-720px; -webkit-animation:mubu_dh_2 5s linear; animation:mubu_dh_2 8s linear forwards; display:none\9;}
@-webkit-keyframes mubu_dh_1 {
	0%{left:0;}
	75% { left:-540px; opacity:100;}
	100% { left:-720px; opacity:0; display:none;}
}
@keyframes mubu_dh_1 {
	0% { left:0;}
	75% { left:-540px; opacity:100;}
	100% { left:-720px; opacity:0; display:none;}
}
@-webkit-keyframes mubu_dh_2 {
    0% { right:0;}
	75% { right:-540px; opacity:100;}
	100% { right:-720px; opacity:0; display:none;}
}
@keyframes mubu_dh_2 {
    0% { right:0;}
	75% { right:-540px; opacity:100;}
	100% { right:-720px; opacity:0; display:none;}
}
.mubu .yanhua2 {width: 100px;height: 100px; display:block; overflow: hidden;background: url(../images/mubu_yh_1.png) no-repeat 0 0; position:absolute; top:300px; left:70%; animation: fireworksfn 5s linear infinite;-webkit-animation: fireworksfn 3s linear infinite;-moz-animation: fireworksfn 3s linear infinite;-ms-animation: fireworksfn 3s linear infinite;-o-animation: fireworksfn 1.5s infinite; display:none\9;}
.mubu .yanhua3 {width: 100px;height: 100px; display:block; overflow: hidden;background: url(../images/mubu_yh_2.png) no-repeat 0 0; position:absolute; top:250px; left:25%; animation: fireworksfn 4s linear infinite;-webkit-animation: fireworksfn 4s linear infinite;-moz-animation: fireworksfn 4s linear infinite;-ms-animation: fireworksfn 4s linear infinite;-o-animation: fireworksfn 1.5s infinite; display:none\9;}
.mubu .yanhua4 {width: 70px;height: 70px; display:block; overflow: hidden;background: url(../images/nyear-wwwa5.png) no-repeat -6px -1px; position:absolute; top:250px; left:50%; animation: fireworksfn 3s linear infinite;-webkit-animation: fireworksfn 4s linear infinite;-moz-animation: fireworksfn 5s linear infinite;-ms-animation: fireworksfn 5s linear infinite;-o-animation: fireworksfn 1.5s infinite; display:none\9;}
@media (min-width:1440px){ 
.mubu{ background:url(../images/mubu_1.jpg) no-repeat top center; height:99.9%;}
.mubu_main{ width:1150px; margin:0 auto; text-align:center; padding-top:300px; }
.mubu_main h1{ font-size:50px; color:#f1ea2e; text-shadow:2px 2px 5px #000; line-height:1.5em; height:1.5em; overflow:hidden;}
.mubu_main h2{ font-size:40px; color:#f1ea2e; text-shadow:2px 2px 5px #000; line-height:1.5em; height:1.5em; overflow:hidden; margin-bottom:30px;}
.mubu_main p{ font-size:24px; line-height:1.5em; height:1.5em; overflow:hidden; color:#fff; text-shadow:2px 2px 5px #000;}
.mubu_main p.into{ margin-top:50px; height:120px;}
.mubu_top{ background:url(../images/mubu_2.png) no-repeat top center; position:fixed; top:0; left:0; height:200px; width:100%;}
.mubu_left{ background:url(../images/mubu_left.jpg) no-repeat; width:960px; height:100%; position:fixed; top:0;left:-960px; -webkit-animation:mubu_dh_1 5s ease-in; animation:mubu_dh_1 8s linear forwards; display:none\9;}
.mubu_right{ background:url(../images/mubu_right.jpg) no-repeat; width:960px; height:100%; position:fixed; top:0; right:-960px; -webkit-animation:mubu_dh_2 5s ease-in; animation:mubu_dh_2 8s linear forwards; display:none\9;}
@-webkit-keyframes mubu_dh_1 {
    0% { left:0;}
	75% { left:-720px; opacity:100;}
	100% { left:-960px; opacity:0; display:none;}
}
@keyframes mubu_dh_1 {
    0% { left:0;}
	75% { left:-720px; opacity:100;}
	100% { left:-960px; opacity:0; display:none;}
}
@-webkit-keyframes mubu_dh_2 {
    0% { right:0;}
	75% { right:-720px; opacity:100;}
	100% { right:-960px; opacity:0; display:none;}
}
@keyframes mubu_dh_2 {
    0% { right:0;}
	75% { right:-720px; opacity:100;}
	100% { right:-960px; opacity:0; display:none;}
}
.mubu .yanhua2 {width: 100px;height: 100px; display:block; overflow: hidden;background: url(../images/mubu_yh_1.png) no-repeat 0 0; position:absolute; top:450px; left:70%; animation: fireworksfn 5s linear infinite;-webkit-animation: fireworksfn 3s linear infinite;-moz-animation: fireworksfn 3s linear infinite;-ms-animation: fireworksfn 3s linear infinite;-o-animation: fireworksfn 1.5s infinite;}
.mubu .yanhua3 {width: 100px;height: 100px; display:block; overflow: hidden;background: url(../images/mubu_yh_2.png) no-repeat 0 0; position:absolute; top:350px; left:30%; animation: fireworksfn 4s linear infinite;-webkit-animation: fireworksfn 4s linear infinite;-moz-animation: fireworksfn 4s linear infinite;-ms-animation: fireworksfn 4s linear infinite;-o-animation: fireworksfn 1.5s infinite;}
.mubu .yanhua4 {width: 70px;height: 70px; display:block; overflow: hidden;background: url(../images/nyear-wwwa5.png) no-repeat -6px -1px; position:absolute; top:400px; left:50%; animation: fireworksfn 3s linear infinite;-webkit-animation: fireworksfn 4s linear infinite;-moz-animation: fireworksfn 5s linear infinite;-ms-animation: fireworksfn 5s linear infinite;-o-animation: fireworksfn 1.5s infinite;}
}

/*ÑÌ»¨*/
@keyframes fireworksfn{
	0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
	50%{opacity:1;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)}
	100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}
	}
@-moz-keyframes fireworksfn{
	0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
	50%{opacity:1;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)}
	100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}
	}
@-webkit-keyframes fireworksfn{
	0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
	50%{opacity:1;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)}
	100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}
	}
@-o-keyframes fireworksfn{
	0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
	50%{opacity:1;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)}
	100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}
	}