老师有没有源码
qq_郎中_0
2016-03-10 11:08
老师有没有源码啊
2回答
-
- 我乐意
- 2016-03-30 11:36:40
自己跟着做的，就是没有兼容性
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>慕课贺春手机端</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/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></div>
<div>2016年慕课网新年特献</div>
</div>
<div id="page2">
<div class="bg p2_bg_loading"></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="page3">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<audio autoplay="true">
<source src="audio/happynewyear.mp3" type="audio/mpeg">
</audio>
</body>
</html>
css：
/* all tag */
* {margin: 0;padding: 0;border: none;font-size: 1.5625vw;font-family: "Microsoft Yahei";}
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%;z-index: 1;width: 28.421%;}
.music > img:last-of-type {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index:0;margin: auto;width: 79%;}
/*音乐转动*/
.music > img.play {
-webkit-animation:music_disc 4s linear infinite;
-o-animation:music_disc 4s linear infinite;
animation:music_disc 4s linear infinite;
}
@-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);
}
}
@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 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.4%;right: 0;left: 0;margin: auto;background: url("../images/p1_lantern.png") no-repeat center bottom;background-size: 45%; widows: 45vw;height: 71.2vh;font-size: 3.506rem;color:#fff;padding-top: 31vh;text-align: center;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
#page1 > .p1_lantern:before {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: -1;content: "";margin: auto; width: 30vw;height: 30vw;background: #d60b3b;opacity: .5;border-radius: 50%;
-webkit-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;
}
@-webkit-keyframes p1_lantern{
0%{opacity: .5;
-webkit-transform: scale(.8, .8);
transform: scale(.8, .8);
}
0%{opacity: .1; }
}
@keyframes p1_lantern{
0%{opacity: .5;
-webkit-transform: scale(.8, .8);
transform: scale(.8, .8);
}
0%{opacity: .1; }
}
#page1 > .p1_imooc {position: absolute; right: 0;bottom: 9vh;left: 0;background: url("../images/p1_imooc.png") no-repeat center center;background-size: 100%;width: 27.656vw;height: 18.63vh;margin: auto;}
#page1 > .p1_words {font-size: 2.134rem;position: absolute;right: 0;bottom: 48px;left: 0;text-align: center;color: #231815;}
/*page2*/
#page2{display: none;/* 显示第二页 */
-webkit-transition: .5s;
transition: .5s;
}
#page2.fadeOut{ opacity: .3;
-webkit-transform:translate(0,-100%);
transform:translate(0,-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;
}
@-webkit-keyframes p2_bg_loading{
0% { opacity: 1; }
100%{ opacity: 0; }
}
@keyframes p2_bg_loading{
0% {opacity: 1; }
100%{opacity: 0; }
}
#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;border-radius: 50%;background: url("../images/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: 0;right: 0;bottom: 0;left: 0;margin: auto;border-radius: 50%;content: "";background: url("../images/p2_circle_middle.png") no-repeat center center;background-size: 100%;width: 45.625vw;height: 45.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;border-radius: 50%;content: "";background: url("../images/p2_circle_inner.png") no-repeat center center;background-size: 100%;width: 39.9375vw;height: 39.9375vw;
_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("../images/p2_2016.png") no-repeat center center;background-size: 100%;width: 27.5vw;height: 6.24vh;}
/*page3*/
#page3{display: none;
-webkit-transition: .5s;
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_logo{width: 34.6875vw;height: 6.327vh;position: absolute;top: 7.82vh;right: 0;left: 0;margin: auto;background: url("../images/p3_logo.png") no-repeat center center;background-size: 100%;}
#page3 > .p3_title {width: 48.125vw;height: 50vh;position: absolute;top: 21vh;right: 0;left: 0;margin: auto;background: url("../images/p3_title.png") no-repeat center center;background-size: 100%;}
#page3 > .p3_second {width: 22.8125vw;height: 41.652vh;position: absolute;top: 25.48vh;left: 3.75vw;background: url("../images/p3_couplet_second.png") no-repeat center center;background-size: 100%;}
#page3 > .p3_first {width: 22.8125vw;height: 41.652vh;position: absolute;top: 25.48vh;right: 3.75vw;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;bottom: 10vh;left: 0;margin: auto;border-radius: 50%;background: url("../images/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);
}
}
js：
window.onload = function(){
//获取元素
var page1 = document.getElementById("page1");
var page2 = document.getElementById("page2");
var page3 = document.getElementById("page3");
var music = document.getElementById("music")
var audio = document.getElementsByTagName("audio")[0];
// 当音乐播放完停止的时候，自动停止光盘旋转效果
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);
};
-
- whosyourdaddy1994
- 2016-03-11 11:04:13
我有源码 采纳下给你发过去
HTML5+CSS3实现春节贺卡
110034 学习 · 450 问题
相似问题