大牛 没有源代码吗？
大牛 没有源代码吗？
1 回答
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>html5</title> <link rel="stylesheet" href="./style/style.css"> <script type="text/javascript" src="script/script.js"></script> </head> <body> <div> <img src="./images/music_pointer.png"> <img id="music" src="./images/music_disc.png"> </div> <div id="page1"> <div></div> <div>点击屏幕<br>开启好运2016</div> <div>2016by123</div> </div> <div id="page2"> <div></div> <div></div> <div></div> </div> <div id="page3"> <div></div> <div></div> <div></div> <div></div> </div> <audio autoplay="true"> <source src="./audio/music.mp3" type="audio/mpeg"> </audio> </body> </html>
* {margin: 0;padding: 0;font-size: 1.5625vw;font-family: "微软雅黑";
}
html,body {height: 100%;overflow: hidden;
}
/* music */
.music {position: fixed;top: 3vh;right: 4vw;z-index: 5;width: 15vw;height: 15vw;border: 4px solid #ef1639;border-radius: 50%;background: #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;margin: auto;width: 79%;z-index: 0;}
.music > .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);
}
}
/* page bg */
.page {position: absolute;width: 100%;height: 100%;
}
.page > .bg {position: absolute;z-index: -1;width: 100%;height: 100%
}
/* page1 */
#page1 {display: block;}
#page1 > .bg {background: url(../images/p1_bg.jpg) no-repeat center center;background-size: 100%;}
#page1 > .p1_lantern {position: absolute;top: -3%;right: 0;left: 0;margin: auto;background: url(../images/p1_lantern.png) no-repeat center center;background-size: 100%;width: 45vw;height: 71.2vh;font-size: 3.5rem;padding-top: 31vh;text-align: center;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box;color: #fff;
}
#page1 > .p1_lantern:before{position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;z-index: -1;content: "";width: 30vw;height: 30vw;background: #d60b3b;opacity: 0.5;border-radius: 50%;-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;
-webkit-animation: p1_lantern .5s infinite alternate;
animation: p1_lantern .5s infinite alternate;
}
@keyframes p1_lantern {
0% { opacity: .5;
-webkit-transform: scale(.8,.8);
transform: scale(.8,.8);
}
100% { opacity: 1;
-webkit-transform: scale(1,1);
transform: scale(1,1);
}
}
#page1 > .p1_words {position: absolute;left: 0;right: 0;bottom: 48px;font-size: 3rem;text-align: center;
}
/* page2 */
#page2 {display: none;
transition: .5s;
}
#page2 > .p2_bg_loading {
z-index: 4; background: #ef1639;
-webkit-animation: p2_bg_loading 2s linear forwards;
animation: p2_bg_loading 2s linear forwards;
}
@keyframes p2_bg_loading {
0% {opacity: 1;}
100% {opacity: 0;}
}
#page2.fadeOut {
opacity: .3;
-webkit-transform: translate(0,-100%);
transform: translate(0,-100%);
}
#page2 > .bg {background: url(../images/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;background: url(../images/p2_circle_outer.png) no-repeat center center;background-size:100%;width: 59vw;height: 59vw;
-webkit-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);
}
}
#page2 > .p2_circle:before {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;content: "";background: url(../images/p2_circle_middle.png) no-repeat center center;background-size:100%;width: 45vw;height: 45vw
-webkit-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);
}
}
#page2 > .p2_circle:after {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;content: "";background: url(../images/p2_circle_inner.png) no-repeat center center;background-size:100%;width: 39vw;height: 39vw;
-webkit-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);
}
}
#page2 > .p2_2016 {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;background: url(../images/p2_2016.png) no-repeat center center;background-size:100%;width: 27vw;height: 27vw
}
/* page3 */
#page3 {display: none;
transition: .5s;
}
#page3.fadeIn {
-webkit-transform: translate(0,-100%);
transform: translate(0,-100%);
}
#page3 > .bg {background: url(../images/p3_bg.jpg) no-repeat center center;background-size: 100%;
}
#page3 > .p3_second {width: 23vw;height: 41vh;position: absolute;top: 24vh;left: 4vw;background: url(../images/p3_couplet_second.png) no-repeat center center;background-size: 100%;
}
#page3 > .p3_first {width: 23vw;height: 41vh;position: absolute;top: 24vh;right: 4vw;background: url(../images/p3_couplet_first.png) no-repeat center center;background-size: 100%;
}
#page3 > .p3_blessing {width: 32vw;height: 32vw;position: absolute;right: 0;left: 0;bottom: 10vh;margin: auto;border-radius:50%;;background: url(../images/p3_blessing.png) no-repeat center center;-webkit-background-size: 100%;background-size: 100%;
-webkit-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);
}
}window.onload = function(){
var music = document.getElementById('music');
var audio = document.getElementsByTagName('audio')[0];
var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');
var page3 = document.getElementById('page3');
//音乐停止 动画停止
audio.addEventListener("ended",function(event){
music.setAttribute("class","");
},false)
//点击停止和播放 音乐 动画
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(event) {
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 fadeIn");
},5500);
},false)
}有些地方的东西省略了，大体是一样的
举报
0/150
提交
取消
