为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/Html5

/HTML5+CSS3实现春节贺卡

有没有这篇的demo发给我

有没有这篇的demo？

qq_嘿我在这显眼吧_03353416

2016-09-04

源自：HTML5+CSS3实现春节贺卡  4-1

关注问题 我要回答
875
操作
收起

正在回答

1 回答

Cocoon3496659 回答被采纳 +3 积分
2016-09-08

<!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);


}

;


0 回复 有任何疑惑可以回复我~
收起回答
#1

qq_嘿我在这显眼吧_03353416 提问者

非常感谢！
2016-10-18 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
HTML5+CSS3实现春节贺卡
  • 参与学习       109892    人
  • 解答问题       450    个

又逢新春佳节，春节贺卡搞起来，学会HTML5+CSS3实现春节贺卡

进入课程

本课相似问答

3 回答请问用Hbuilder能行吗，或者有没有这类的案例教程

2 回答没有psd

1 回答这边有没有源文件可以下载看看吗

2 回答老师有没有源码

2 回答这个做一个自己的，怎么样给别人发过去就可以看？
搜索更多本课相关问答

有没有这篇的demo发给我

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信