<!DOCTYPE html> <html> <head> <meta charset='UTF-8'/> <meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no'/> <meta name='format-detecion' content='telephone=no'/> <meta http-equiv='X-UA-Compatible' content='IE=edge, chrome=1'/> <title>2017贺春</title> </head> <style> /* all tag */ *{ margin: 0px; padding: 0px; border: none; font-size: 1.5625vw; font-family: 'Microsoft Yahei'; } html, body{ height: 100%; overflow: hidden; } #music{ position: fixed; top: 3vw; right: 4vw; z-index: 5; 15vw; height: 15vw; border: 4px solid #ef1639; border-radius: 50%; } #music > img:first-of-type{ position: absolute; top: 24%; right: 2.5%; 28.421%; z-index: 1; } #music > img:last-of-type{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 79%; z-index: 0; } #music > img.play{ -webkit-animation: music_disc 4s linear infinite; -o-animation: music_disc 4s linear infinite; animation: music_disc 4s linear infinite; } @keyframes music_disc{ 0%{ -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes music_disc{ 0%{ -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes music_disc{ 0%{ -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .page{ position: absolute; 100%; height: 100%; } /* page bg */ .page > .bg{ position: absolute; 100%; height: 100%; } /* page1 */ #page1{ display: block; } #page1 > .bg{ background: url('image/p1_bg.jpg') no-repeat center center; background-size: 100%; } #page1 > .p1_lantern{ position: absolute; top: -3.4%; right: 0; left: 0; margin: auto; color: #fff; background: url('image/p1_lantern.png') no-repeat center bottom; background-size: 100%; 45vw; height: 71.2vh; font-size: 3.506rem; padding-top: 31vh; text-align: center; z-index:0; -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; bottom: 0; left: 0; content: ''; margin: auto; 30vw; height: 30vw; z-index: -1; background: #d60b3b; border-radius: 50%; opacity: .5; -webkit-box-shadow: 0 0 10vw 10vw #d60b3b; -moz-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; -o-animation: p1_lantern .5s infinite; animation: p1_lantern .5s infinite; } @keyframes p1_lantern{ 0%{ opacity: .5; -webkit-transform: scale(.8, .8); transform: scale(.8, .8); } 100%{ opacity: 1; } } @-webkit-keyframes p1_lantern{ 0%{ opacity: .5; -webkit-transform: scale(.8, .8); transform: scale(.8, .8); } 100%{ opacity: 1; } } @-o-keyframes p1_lantern{ 0%{ opacity: .5; -webkit-transform: scale(.8, .8); transform: scale(.8, .8); } 100%{ opacity: 1; } } #page1 > .p1_imooc{ position: absolute; right: 0; bottom: 9vh; left: 0; background: url('image/p1_imooc.png') no-repeat center center; background-size: 100%； 27.656vw; height: 18.63vh; margin: auto; } #page1 > .p1_words{ position: absolute; font-size: 2.134rem; right: 0; bottom: 48px; left: 0; text-align: center; color: #241815; } /* page2 */ #page2{ display: none; -webkit-transition: .5s; transition: .5s; } .fadeOut{ opacity: .3; -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } #page2 > .bg{ background: url('image/p2_bg.jpg') no-repeat center center; background-size: 100%; } #page2 > .p2_bg_loading{ z-index: 4; background: #ef1639 -webkit-animation: p2_bg_loading 1s linear forwards; animation: p2_bg_loading 1s linear forwards; } @keyframes p2_bg_loading{ 0%{ opacity: 1;} 100%{ opacity: 0;} } @-webkit-keyframes p2_bg_loading{ 0%{ opacity: 1;} 100%{ opacity: 0;} } #page2 > .p2_circle{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border-radius: 50%; background: url('image/p2_circle_outer.png') no-repeat center; background-size: 100%; 59.375vw; height: 59.375vw; -webkit-animation: p2_circle_outer 1s linear 3s infinite; -o-animation: p2_circle_outer 1s linear 3s infinite; animation: p2_circle_outer 1s linear 3s infinite; } @keyframes p2_circle_outer{ 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes p2_circle_inner{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @-o-keyframes p2_circle_inner{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } #page2 > .p2_circle:before{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border-radius: 50%; content: ''; background: url('image/p2_circle_middle.png') no-repeat center; background-size: 100%; 45.625vw; height: 45.625vw; -webkit-animation: p2_circle_middle 1s linear 2s infinite; -o-animation: p2_circle_middle 1s linear 2s infinite; animation: p2_circle_middle 1s linear 2s infinite; } @keyframes p2_circle_middle{ 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-720deg); transform: rotate(-720deg); } } @-webkit-keyframes p2_circle_inner{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(-720deg); transform: rotate(-720deg); } } @-o-keyframes p2_circle_inner{ 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; border-radius: 50%; content: ''; background: url('image/p2_circle_inner.png') no-repeat center; background-size: 100%; 39.9375vw; height: 39.9375vw; -webkit-animation: p2_circle_inner 1s linear 1s infinite; -o-animation: p2_circle_inner 1s linear 1s infinite; animation: p2_circle_inner 1s linear 1s infinite; } @keyframes p2_circle_inner{ 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-1080deg); transform: rotate(-1080deg); } } @-webkit-keyframes p2_circle_inner{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(-1080deg); transform: rotate(-1080deg); } } @-o-keyframes p2_circle_inner{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(-1080deg); transform: rotate(-1080deg); } } #page2 > .p2_2017{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border-radius: 50%; background: url('image/p2_2016.png') no-repeat center; background-size: 100%; 30.5vw; height: 18vh; } /* page3 */ #page3{ display: none; -webkit-transition: .5s; transition: .5s; } .fadeInt{ -webkit-transform: translate(0, -100%); -ms-transform: translate(0, -100%); -o-transform: translate(0, -100%); transform: translate(0, -100%); } #page3 > .bg{ background: url('image/p3_bg.jpg') no-repeat center center; background-size: 100%; } #page3 > .p3_logo{ 34.6875vw; height: 6.3275vh; position: absolute; top: 12vh; right: 0; left: 0; margin: auto; background: url('image/p3_logo.png') no-repeat center; background-size: 100%; } #page3 > .p3_title{ 48.125vw; height: 50vh; position: absolute; top: 21vh; right: 0; left: 0; margin: auto; background: url('image/p3_title.png') no-repeat center; background-size: 100%; } #page3 > .p3_second{ 22.8125vw; height: 41.652vh; position: absolute; top: 25.48vh; left: 3.75vw; background: url('image/p3_couplet_second.png') no-repeat center; background-size: 100%; } #page3 > .p3_first{ 22.8125vw; height: 41.652vh; position: absolute; top: 25.48vh; right: 3.75vw; background: url('image/p3_couplet_first.png') no-repeat center; background-size: 100%; } #page3 > .p3_blessing{ 32vw; height: 32vw; position: absolute; bottom: 10vh; right: 0; left: 0; margin: auto; border-radius: 50%; background: url('image/p3_blessing.png') no-repeat center; background-size: 100%; -webkit-animation: p3_blessing 2s linear infinite; -o-animation: p3_blessing 2s linear infinite; animation: p3_blessing 2s linear infinite; } @keyframes p3_blessing{ 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes p3_blessing{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes p3_blessing{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); } } </style> <body> <div id='music'> <img src='image/music_pointer.png'/> <img class='play' id='btn' src='image/music_disc.png'/> </div> <div class='page' id='page1'> <div class='bg'></div> <div class='p1_lantern'>点击屏幕<br>开启好运2017</div> <div class='p1_imooc'></div> <div class='p1_words'>2017年阿里瓦新年特献</div> </div> <div class='page' id='page2'> <div class='bg p2_bg_loading'></div> <div class='bg'></div> <div class='p2_circle'></div> <div class='p2_2017'></div> </div> <div class='page' id='page3'> <div class='bg'></div> <div class='p3_logo'></div> <div class='p3_title'></div> <div class='p3_second'></div> <div class='p3_first'></div> <div class='p3_blessing'></div> </div> <audio autoplay='true'> <source src='http://www.imooc.com/activity/project/project1/audio/happynewyear.mp3' type='audio/mpeg'> </audio> <script type='text/javascript'> var page1 = document.getElementById('page1'); var page2 = document.getElementById('page2'); var page3 = document.getElementById('page3'); var music = document.getElementById('btn'); var audio = document.getElementsByTagName('audio')[0]; audio.addEventListener('ended', function(){ music.setAttribute('class',''); }, false); //music.onclick = function(){ // if(audio.paused){ // audio.play(); // this.setAttribute('class','play'); // //this.style.animationPlayState = 'running'; // }else{ // audio.pause(); // this.setAttribute('class',' '); // //this.style.animationPlayState = 'paused'; // } //} music.addEventListener('touchstart', function(event){ if(audio.paused){ audio.play(); this.setAttribute('class','play'); }else{ audio.pause(); this.setAttribute('class',' '); } }, false); page1.addEventListener('touchstart', function(){ page1.style.display = 'none'; page2.style.display = 'block'; page3.style.display = 'block'; page3.style.top = '100%'; setTimeout(function(){ page2.setAttribute('class', 'page fadeOut'); page3.setAttribute('class', 'page fadeInt'); }, 5500); }, false); </script> </body> </html>
效果图如下：
