                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /HTML5+CSS3實現(xiàn)春節(jié)賀卡

頁面3背景圖提前在頁面2顯示了

*{
????margin:0;
????padding:0;
????border:none;
????font-size:1.5625vw;
????font-family:"Microsoft?Yahei";
}

html,body{
????height:100%;overflow:?hidden;
}
.music{
????display:?block;
}
.music{
????position:fixed;
????top:3vh;
????right:4vw;
????z-index:5;
????width:15vw;
????height:15vw;
????border:4px?solid?#ef1639;
????border-radius:50%;
????background-color:#fff;
}
.music?>?img:first-of-type{
????position:absolute;
????top:24%;
????right:2.5%;
????width:28.421%;
????z-index:1;
}
.music?>?img:last-of-type{
????position:absolute;
????top:0;
????right:0;
????bottom:0;
????left:0;
????z-index:?0;
????margin:auto;
????width:79%;
}
#shouba{
????-webkit-transform-origin:100%?0%;
????transform-origin:100%?0%;
????-webkit-transform:rotate(-15deg);
????transform:rotate(-15deg);
????-webkit-animation:0.5s;
????animation:0.5s;
}
.music?>?img:nth-child(2){
????position:absolute;
????top:11%;
????right:0;
????bottom:0;
????left:11%;
????margin:0;
????width:79%;
}
.music?>?img.play{
????-webkit-animation:music_disc?4s?linear?infinite;
????animation:music_disc?4s?linear?infinite;
}
@keyframes?music_disc{
????0%{
????????-webkit-transform:rotate(0deg);
????????transform:rotate(0deg);
????}
????100%{
????????-webkit-transform:rotate(360deg);
????????transform:rotate(360deg);
????}
}
@keyframes?music_pointer{
????0%{
????????-webkit-transform:rotate(0deg);
????????transform:rotate(0deg);
????}
????100%{
????????-webkit-transform:rotate(360deg);
????????transform:rotate(360deg);
????}
}@-webkit-keyframes?music_pointer{
????0%{
????????-webkit-transform:rotate(0deg);
????????transform:rotate(0deg);
????}
????100%{
????????-webkit-transform:rotate(360deg);
????????transform:rotate(360deg);
????}
}
@-webkit-keyframes?music_disc{
????0%{
????????-webkit-transform:rotate(0deg);
????????transform:rotate(0deg);
????}
????100%{
????????-webkit-transform:rotate(360deg);
????????transform:rotate(360deg);
????}
}
.page{
????height:100%;
}
#page1?>?.bg{
????position:absolute;
????z-index:-1;
????width:100%;
????height:100%;
}
#page1?>.bg{
????background:?url("../img/p1_bg.jpg")no-repeat?center?center;
????background-size:100%;
}
#page1?>?.p1_lantern{
????width:45vw;
????height:?75.2vh;
????font-size:3em;
????position:absolute;
????top:-3.4%;
????right:0;
????left:0;
????color:green;
????text-align:center;
????font-weight:bold;
????margin:auto;
????background:url("../img/p1_lantern.png")no-repeat?center?center;
????background-size:100%;
????padding-top:31vh;
????-webkit-box-sizing:?border-box;
????-moz-box-sizing:?border-box;
????-ms-box-sizing:?border-box;
????-o-box-sizing:?border-box;
????box-sizing:?border-box;
}
#page1?>?.p1_lantern:before{
????position:absolute;
????top:0;
????right:0;
????left:0;
????bottom:0;
????margin:auto;
????content:"";
????width:30vw;
????height:30vw;
????background:#d60b3b;
????opacity:0.5;
????border-radius:50%;
????-webkit-box-shadow:0?0?10vw?10vw?#d60b3b;
????-ms-box-shadow:0?0?10vw?10vw?#d60b3b;
????-o-box-shadow:0?0?10vw?10vw?#d60b3b;
????box-shadow:0?0?10vw?10vw?#d60b3b;
????-webkit-animation:p1_lantern?.5s?infinite?alternate;
????animation:p1_lantern?.5s?infinite?alternate;
}
@keyframes?p1_lantern{
????0%{
????????opacity:0.5;
????????-webkit-transform:?scale(0.8,0.8);
????????transform:?scale(0.8,0.8);
????}
????100%{
????????opacity:1;
????}
}
@-webkit-keyframes?p1_lantern{
????0%{
????????opacity:0.5;
????????-webkit-transform:?scale(0.8,0.8);
????????transform:?scale(0.8,0.8);
????}
????100%{
????????opacity:1;
????}
}
#page1?>?.p1_imooc{
????position:absolute;
????right:0;
????bottom:9vh;
????left:0;
????background:url("../img/p1_imooc.png")?no-repeat?center?center;
????background-size:100%;
????width:27.656vw;
????height:18.63vh;
????margin:1em?auto?;
}
#page1?>?.p1_words{
????font-size:2.5em;
????position:absolute;
????right:0;
????bottom:2em;
????left:0;
????text-align:center;
????color:#231815;
}
#page2{
/*????display:none;*/
????-webkit-transition:0.5s;
????transition:0.5s;
}
#page2.fadeOut{
????opacity:0.3;
????-webkit-transform:translate(0,-100%);
????transform:translate(0,-100%);
}
#p2_bg_loading{
????/*z-index:4;*/
????background:#ef1639;
????-webkit-animation:p2_bg_loading?1s?linear?forwards;
????animation:p2_bg_loading?1s?linear?forwards;
}
@-webkit-keyframes?p2_circle{
????0%{opacity:0;}
????100%{opacity:1;}
}
@keyframes?p2_circle{
????0%{opacity:0;}
????100%{opacity:1;}
}
#page2?>?.bg{
????position:absolute;
????z-index:-1;
????width:100%;
????height:100%;
}
#page2{display:?none;
?-webkit-transition:?.5s;
???????????transition:.5s;
}
#page2.fadeOut{
????opacity:?.3;
????-webkit-transform:?translate(0,-100%);
????-transform:?translate(0,-100%);
}

#page2?>.bg{
????background:url("../img/p2_bg.jpg")?no-repeat?center?center;
????background-size:100%;
}
#page2?>?.p2_circle{
????position:absolute;
????top:0;
????right:0;
????bottom:0;
????left:0;
????margin:auto;
????z-index:?3;
????background:url("../img/p2_circle_outer.png")?no-repeat?center?center;
????background-size:100%;
????width:59.375vw;
????height:?59.375vw;
????-webkit-animation:p2_circle_outer?1s?linear?3s?infinite;
????animation:p2_circle_outer?1s?linear?3s?infinite;
}
@-webkit-keyframes?p2_circle_outer{
0%{
????-webkit-transform:rotate(0deg);
????transform:rotate(0deg);
}
100%{
????-webkit-transform:rotate(-360deg);
????transform:rotate(-360deg);
}
}
@keyframes?p2_circle_outer{
????0%{
????????-webkit-transform:rotate(0deg);
????????transform:rotate(0deg);
????}
????100%{
????????-webkit-transform:rotate(-360deg);
????????transform:rotate(-360deg);
????}
}
#page2?>?.p2_circle:before{
????position:absolute;
????top:?0vh;;
????right:0vh;
????bottom:0vh;
????left:0vh;
????margin:auto;
????content:?"";
????background:url("../img/p2_circle_middle.png")?no-repeat?center?center;
????background-size:100%;
????width:47.625vw;
????height:47.625vw;
????-webkit-animation:p2_circle_middle?1s?linear?2s?infinite;
?????????????animation:p2_circle_middle?1s?linear?2s?infinite;
}
@-webkit-keyframes?p2_circle_middle{
0%{
????-webkit-transform:rotate(0deg);
????transform:rotate(0deg);
}
100%{
????-webkit-transform:rotate(720deg);
????transform:rotate(720deg);
}
}
@keyframes?p2_circle_middle{
????0%{
????????-webkit-transform:rotate(0deg);
????????transform:rotate(0deg);
????}
????100%{
????????-webkit-transform:rotate(720deg);
????????transform:rotate(720deg);
????}
}
#page2?>?.p2_circle:after{
????position:absolute;
????top:0;
????right:0;
????bottom:0;
????left:0;
????margin:auto;
????content:?"";
????background:url("../img/p2_circle_inner.png")?no-repeat?center?center;
????background-size:100%;
????width:39.937vw;
????height:39.937vw;
????-webkit-animation:p2_circle_inner?1s?linear?1s?infinite;
????animation:p2_circle_inner?1s?linear?1s?infinite;
}
@-webkit-keyframes?p2_circle_inner{
????0%{
????????-webkit-transform:rotate(0deg);
????????transform:rotate(0deg);
????}
????100%{
????????-webkit-transform:rotate(-1080deg);
????????transform:rotate(-1080deg);
????}
}
@keyframes?p2_circle_inner{
????0%{
????????-webkit-transform:rotate(0deg);
????????transform:rotate(0deg);
????}
????100%{
????????-webkit-transform:rotate(-1080deg);
????????transform:rotate(-1080deg);
????}
}

#page2?>?.p2_2016{
????position:absolute;
????top:0;
????right:0;
????bottom:0;
????left:0;
????margin:auto;
????background:url("../img/p2_2016.png")?no-repeat?center?center;
????background-size:100%;
????width:27.5vw;
????height:6.24vh;
}
#page3{
????display:none;
????-webkit-transition:?0.5s;
????transition:?0.5s;
}
#page3.fadeIn{
????-webkit-transform:translate(0,?-100%);
????transform:translate(0,-100%);

}
#page3?>?.bg{
????position:absolute;
????z-index:-1;
????width:100%;
????height:100%;
}



#page3?>.bg{
????background:url("../img/p3_bg.jpg")?no-repeat?center?center;
????background-size:100%;
}
#page3?>?.p3_logo{
????width:34.6875vw;
????height:6.327vh;
????position:absolute;
????top:7.82vh;
????right:0;
????left:0;
????margin:auto;
????background:url("../img/p3_logo.png")?no-repeat?center?center;
????background-size:100%;
}
#page3?>?.p3_title{
????width:48.125vw;
????height:50vh;
????position:absolute;
????top:20.80vh;
????right:0;
????left:0;
????margin:auto;
????background:url("../img/p3_title.png")?no-repeat?center?center;
????background-size:100%;
}
#page3?>?.p3_second{
????width:22.8125vw;
????height:41.625vh;
????position:absolute;
????top:25.48vh;
????left:3.75vw;
????background:url("../img/p3_couplet_second.png")?no-repeat?center?center;
????background-size:100%;
}#page3?>?.p3_first{
?????width:22.8125vw;
?????height:41.625vh;
?????position:absolute;
?????top:25.48vh;
?????right:3.75vw;
?????background:url("../img/p3_couplet_first.png")?no-repeat?center?center;
?????background-size:100%;
?}
#page3?>?.p3_blessing{
????width:32vw;
????height:32vh;
????position:absolute;
????bottom:-2vh;
????right:0;
????left:0;
????margin:auto;
????border-radius:50%;
????background:url("../img/p3_blessing.png")?no-repeat?center?center;
????background-size:100%;
????-webkit-animation:p3_blessing?2s?linear??infinite;
????animation:p3_blessing?2s?linear??infinite;
}

@-webkit-keyframes?p3_blessing{
0%{
????-webkit-transform:rotate(0deg);
????transform:rotate(0deg);
}
100%{
????-webkit-transform:rotate(360deg);
????transform:rotate(360deg);
}
}
@keyframes?p3_blessing{
????0%{
????????-webkit-transform:rotate(0deg);
????????transform:rotate(0deg);
????}
????100%{
????????-webkit-transform:rotate(360deg);
????????transform:rotate(360deg);
????}
}