有没有这篇的demo发给我
qq_嘿我在这显眼吧_03353416
2016-09-04 13:09
有没有这篇的demo？
1回答
-
- Cocoon3496659
- 2016-09-08 15:53:20
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1"><!--强制网页以-webkit-内核渲染,如果是IE浏览器就以最高模式渲染-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maxumum-scal=1,user-scalable=no"><!--视口控制-->
<meta name="format-detection" content="telephone=no"><!--控制iphone数字不显示为电话链接-->
<title>慕课贺春</title>
<link rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="js/music.js"></script>
</head>
<body>
<div class="music">
<img src="images/music_pointer.png"/>
<img class="play" id="music" src="images/music_disc.png"/>
</div>
<div class="page" id="page1">
<div class="bg"></div>
<div class="p1_lantern">点击屏幕<br>开启好运2016</div>
<div class="p1_imooc"></div>
<div class="p1_words">2016年敏特新特献</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_2016"></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="js/music.mp3" type="audio/mpeg" media="">
</audio>
</body>
</html>
/* CSS Document */
*{
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%;
width:28.421%;
z-index:1;}
.music > img:last-of-type{/*碟片*/
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
width:79%;
z-index:0;}
.music > img.play{
-webkit-animation:music_disc 4s linear infinite;/*4秒钟一个周期，等速，循环播放*/
-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;
width:100%;
height:100%;
z-index:-1;}
/*page 1*/
#page1{
display:block;}
#page1 >.bg{
background:url(../images/p1_bg.jpg) center no-repeat;
background-size:100%;}
#page1 >.p1_lantern{
position:absolute;
top:-3.4%;
right:0;
left:0;
margin:auto;
background:url(../images/p1_lantern.png) center bottom no-repeat;
background-size:100%;
width:45vw;
height:80.2vh;
font-size:3.506rem;
color:#fff;
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;
box-sizing:border-box;
}
#page1 >.p1_lantern:before{
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
width:30vw;
height:30vw;
background:#d60b3b;
border-radius:50%;
opacity:.5;
z-index:-1;
-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 0.5s infinite alternate;/*0.5秒钟一个周期，循环播放，反向*/
-o-animation:p1_lantern 0.5s infinite alternate;
animation:p1_lantern 0.5s infinite alternate;
}
@-webkit-keyframes p1_lantern{
0%{
opacity:.5;
-webkit-transform:scale(0.8,0.8);
transform:scale(0.8,0.8);
}
100%{
opacity:1;
-webkit-transform:scale(1,1);
transform:scale(1,1);
}
}
@keyframes p1_lantern{
0%{
opacity:.5;
-webkit-transform:scale(0.8,0.8);
transform:scale(0.8,0.8);
}
100%{
opacity:1;
-webkit-transform:scale(1,1);
transform:scale(1,1);
}
}
#page1 >.p1_imooc{
position:absolute;
right:0;
bottom:4vh;
left:0;
margin:auto;
background:url(../images/p1_imooc.png) center center no-repeat;
background-size:100%;
width:27.656vw;
height:18.63vh;}
#page1 >.p1_words{
font-size:2.134rem;
position:absolute;
right:0;
bottom:10px;
left:0;
text-align:center;
color:#231815;
}
/*page 2*/
#page2{
display:none;
-webkit-transition:.5s;
transition:.5s;}
#page2.fadeOut{
opacity:.3;
-webkit-transform:translate(0,-100%);/*偏移，水平方向不偏移，垂直方向偏移-100%*/
transform:translate(0,-100%);
}
#page2 >.p2_bg_loading{
z-index:4;
background:#ef1639;
-webkit-animation:p2_bg_loading 1s linear forwards;/*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) center no-repeat;
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:59.375vw;
height:59.375vw;
border-radius:50%;
-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;
content:"";
background:url(../images/p2_circle_middle.png) no-repeat center center;
background-size:100%;
width:45.625vw;
height:45.625vw;
border-radius:50%;
-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(../images/p2_circle_inner.png) no-repeat center center;
background-size:100%;
width:39.9375vw;
height:39.9375vw;
border-radius:50%;
-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:7.24vh;
}
/*page 3*/
#page3{
display:none;
-webkit-transition:.5s;/*.5s实现过度效果*/
transition:.5s;}
#page3.fadeIn{
opacity:1;
-webkit-transform:translate(0,-100%);
transform:translate(0,-100%);
}
#page3 >.bg{
background:url(../images/p3_bg.jpg) center no-repeat;
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) center center no-repeat;
background-size:100%;}
#page3 >.p3_title{
width:48.125vw;
height:56vh;
position:absolute;
top:21vh;
right:0;
left:0;
margin:auto;
background:url(../images/p3_title.png) center center no-repeat;
background-size:100%;
}
#page3 >.p3_second{
width:22.8125vw;
height:41.625vh;
position:absolute;
top:25.48vh;
left:3.75vw;
margin:auto;
background:url(../images/p3_couplet_second.png) center center no-repeat;
background-size:100%;
-webkit-animation:p3_second 5s linear infinite alternate;
animation:p3_second 5s linear infinite alternate;
}
@-webkit-keyframes p3_second{
0%{
opacity:0.8;
transform:scale(.8,.8);
}
100%{
opacity:1;
transform:scale(1,1);
}
}
@keyframes p3_second{
0%{
opacity:0.8;
transform:scale(.8,.8);
}
100%{
opacity:1;
transform:scale(1,1);
}
}
#page3 >.p3_first{
width:22.8125vw;
height:41.625vh;
position:absolute;
top:25.48vh;
right:3.75vw;
margin:auto;
background:url(../images/p3_couplet_first.png) center center no-repeat;
background-size:100%;
-webkit-animation:p3_first 5s linear infinite alternate;
animation:p3_first 5s linear infinite alternate;
}
@-webkit-keyframes p3_first{
0%{
opacity:0.8;
transform:scale(.8,.8);
}
100%{
opacity:1;
transform:scale(1,1);
}
}
@keyframes p3_first{
0%{
opacity:0.8;
transform:scale(.8,.8);
}
100%{
opacity:1;
transform:scale(1,1);
}
}
#page3 >.p3_blessing{
width:22.8125vw;
height:15.625vh;
position:absolute;
left:0;
right:0;
bottom:6vh;
margin:auto;
border-radius:50%;
background:url(../images/p3_blessing.png) center center no-repeat;
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);
}
}
// JavaScript Document
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(){
music.setAttribute("class","");
//music.style.animationPlayState="paused";
//music.style.webkitanimationPlayState="paused";
},false);
// 点击音乐图标，控制音乐播放效果
// music.onclick=function(){
// if(audio.paused){
// audio.play();
// //this.setAttribute("class","play");
// this.style.animationPlayState="running";//安卓4.4版本以上，苹果6版本以上
// this.style.webkitanimationPlayState="running";
// }else{
// audio.pause();
// //this.setAttribute("class","");
// this.style.animationPlayState="paused";
// this.style.webkitanimationPlayState="paused";
// }
// }
//手机端触屏模式，监听事件
music.addEventListener("touchstart",function(event){
if(audio.paused){
audio.play();
this.setAttribute("class","play");
//this.style.animationPlayState="running";//安卓4.4版本以上，苹果6版本以上
//this.style.webkitanimationPlayState="running";
}else{
audio.pause();
this.setAttribute("class","");
//this.style.animationPlayState="paused";
//this.style.webkitanimationPlayState="paused";
}
},false);
//点击屏幕，开启好运2016
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实现春节贺卡
110036 学习 · 450 问题
相似问题