大牛 没有源代码吗？
来源：3-6 移动端项目开发——表示层(page2)
大海qq
2016-05-24 19:26
大牛 没有源代码吗？
写回答
关注
1回答
-
- weibo_小野4455_0
- 2016-05-24 21:32:05
<!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) }有些地方的东西省略了，大体是一样的
HTML5+CSS3实现春节贺卡
又逢新春佳节，春节贺卡搞起来，学会HTML5+CSS3实现春节贺卡
110033 学习 · 450 问题
相似问题