HTML5+CSS3实现春节贺卡

切图——>重构——>前端——>优化

知道原生的JS代码，了解Html5API，了解WampServer。

结构层为index.html

 1 <!DOCTYPE html>
 2 <html lang="Zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>贺春</title>
 6     <link rel="stylesheet" type="text/css" href="CSS/style.css">
 7     <script type="text/javascript" src="JS/script.js"></script><!--defer页面运行完再进行js-->
 8     <!--解决第三页页面变小的问题-->
 9     <!--X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式。-->
10     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
11     <!--viewport 是用户网页的可视区域
12     width=device-宽度等于屏幕宽度
13     initial-scale=1：初始化为1
14     minimum-scale=1, maximum-scale=1:最小最大都为1
15     user-scalable=no：用户不能缩放-->
16     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
17     <!--format-detection —— 格式检测，用来检测html里的一些格式，telephone=no 禁止把数字转化为拨号链接-->
18     <meta name="format-detection" content="telephone=no">
19 
20 </head>
21  <body>
22 <div class="music">
23     <img src="images/music_pointer.png">
24     <img class="play" id="music" src="images/music_disc.png">
25 </div>
26 <div class="page" id="page1">
27     <div class="bg"></div>
28     <div class="p1_lantern">点击屏幕<br>开启好运2018</div>
29     <div class="baozi"></div>
30     <div class="p1_words">包子祝您新年快乐</div>
31 </div>
32 <div class="page" id="page2">
33     <div class="bg p2_bg_loading"></div>
34     <div class="bg"></div>
35     <div class="p2_circle"></div>
36     <div class="p2_2018"></div>
37 </div>
38 <div class="page" id="page3">
39     <div class="bg"></div>
40     <div class="p3_logo"></div>
41     <div class="p3_title"></div>
42     <div class="p3_blessing"></div>
43 </div>
44 <audio autoplay="true"><!--autoplay自动播放-->
45     <source src="Khristian%20Araneda%20-%20New%20Years.mp3" type="audio/mpeg">
46 </audio>
47 </body>
48 </html>

index.html

因为需要点击光盘让音乐开始和停止，又使用id获取元素要比class容易一些，所以我们在写的时候将音乐改为 id="music"

但是CSS中尽量用class，因为要用到js，所以id="music"用于控制音乐

表示层为style.css

  1 /*all tag统配符*/
  2 * {
  3     magin: 0;
  4     padding: 0;
  5     border: none;
  6     font-size: 1.5625vw;
  7     font-family: "Microsoft YaHei";
  8 }
  9 html,body {
 10     height: 100%;/*给html和body加一个高度，因为html和body都是块状元素，而块状元素的特点就是默认高度为0，由内容将它撑开*/
 11     overflow: hidden;/*overflow 属性规定当内容溢出元素框时发生的事情。*/
 12 }
 13 
 14 /*music部分*/
 15 .music {
 16     position: fixed;/*固定*/
 17     top: 3vh;
 18     right: 4vw;
 19     z-index: 5;/*不会有东西遮住它*/
 20     width: 15vw;
 21     height: 15vw;
 22     border: 4px solid #ef1639;
 23     border-radius: 50%;/*使光盘的边为圆形*/
 24     background: #fff;/**/
 25 }
 26 .music > img:first-of-type {/* > 直接后代选择器;first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。*/
 27     position: absolute;
 28     top: 24%;
 29     right: 2.5%;
 30     z-index: 1;/*指针图片在上面*/
 31     width: 28.421%;
 32 }
 33 .music > img:last-of-type {/*选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素*/
 34     position: absolute;
 35     top: 0;
 36     right: 0;
 37     bottom: 0;
 38     left: 0;
 39     margin: auto;
 40     width: 79%;
 41 }
 42 /*特效部分*/
 43 .music > img.play {/*给class="play"控制光盘转动*/
 44     -webkit-animation: music_disc 4s linear infinite;/*4s一个周期  等速  重复*/
 45          -o-animation: music_disc 4s linear infinite;
 46             animation: music_disc 4s linear infinite;
 47 }
 48 /*因为是手机端不考虑-o-(Opera)*/
 49 @-webkit-keyframes music_disc {/*光盘转动*/
 50     0% {
 51         -webkit-transform: rotate(0deg);/*rotate旋转*/
 52             -ms-transform: rotate(0deg);
 53            /*-o-transform: rotate(0deg);*/
 54                 transform: rotate(0deg);
 55     }
 56     100% {
 57         -webkit-transform: rotate(360deg);
 58             -ms-transform: rotate(360deg);
 59                 transform: rotate(360deg);
 60     }
 61 }
 62 /*使用@keyframes规则，你可以创建动画。
 63 创建动画是通过逐步改变从一个CSS样式设定到另一个。
 64 在动画过程中，您可以更改CSS样式的设定多次。
 65 指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
 66 0％是开头动画，100％是当动画完成。*/
 67 
 68 /*page  bg*/
 69 .page {
 70     position: absolute;/*3个页面完全重叠*/
 71     width: 100%;/*absolute之后没有宽度，所以给一个宽度*/
 72     height: 100%;/*给背景加一个高度，但是在没有给html和body加高度之前没有用*/
 73 }
 74 .page > .bg{
 75     position: absolute;/*背景肯定要绝对定位*/
 76     z-index: -1;/*让背景在最下层*/
 77     width: 100%;
 78     height: 100%;
 79 }
 80 /* page1 */
 81 #page1 {
 82     display: block;
 83 }
 84 #page1 > .bg {
 85     background: url("../images/p1_bg.jpg") no-repeat center;
 86     background-size: 100%;/*让图片充斥整个背景*/
 87 }
 88 #page1 > .p1_lantern {/*第一页的灯笼*/
 89     position: absolute;
 90     color: white;
 91     top: -3.4%;
 92     right: 0;
 93     left: 0;
 94     margin: auto;
 95     background: url("../images/p1_lantern.png") no-repeat center bottom;/*不重复  居中  上下在底部*/
 96     background-size: 100%;
 97     width: 45vw;
 98     height: 71.2vh;
 99     font-size: 3.506rem;
100     padding-top: 31vh;
101     text-align: center;/*文字居中*/
102 
103             box-sizing: border-box;/*box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。*/
104     -webkit-box-sizing: border-box;/*兼容性*/
105        -moz-box-sizing: border-box;
106         -ms-box-sizing: border-box;
107          -o-box-sizing: border-box;
108 }
109 #page1 > .p1_lantern:before { /*光芒闪耀；before在内容之前，文字前面*/
110     position: absolute;
111     top: 0;
112     right: 0;
113     bottom: 0;
114     left: 0;
115     z-index: -1;
116     content: "";
117     margin: auto;
118     width: 30vw;
119     height: 30vw;
120     background: #d60b3b;
121     opacity: .5; /*透明度*/
122     border-radius: 50%; /*设光为圆形*/
123 
124     box-shadow: 0 0 10vw 10vw #d60b3b; /*阴影*/
125     -webkit-box-shadow: 0 0 10vw 10vw #d60b3b; /*兼容性*/
126        -moz-box-shadow: 0 0 10vw 10vw #d60b3b;
127         -ms-box-shadow: 0 0 10vw 10vw #d60b3b;
128          -o-box-shadow: 0 0 10vw 10vw #d60b3b;
129 
130     /*特效部分*/
131     -webkit-animation: p1_lantern .5s infinite alternate; /*闪烁0.5秒  不重复  可以反向（从大到小从小到大）*/
132          -o-animation: p1_lantern .5s infinite alternate;
133             animation: p1_lantern .5s infinite alternate;
134 }
135 @-webkit-keyframes p1_lantern {
136     0% {
137         opacity: .5;
138         -webkit-transform: scale(.8,.8);/*scale缩小*/
139         transform: scale(.8,.8);/*水平80%  竖直80%*/
140     }
141     100% {
142         opacity: 1;
143     }
144 }
145 @keyframes p1_lantern {
146         0% {
147             opacity: .5;
148             -webkit-transform: scale(.8,.8);/*scale缩小*/
149                     transform: scale(.8,.8);/*水平80%  竖直80%*/
150         }
151         100% {
152             opacity: 1;
153         }
154     }
155 
156 #page1 > .baozi {
157     position: absolute;
158     right: 0;
159     left: 0;
160     bottom: 2.6vh;
161     background: url("../images/baozi.png") no-repeat center;
162     width: 30vw;
163     height: 28.63vh;
164     margin: auto;
165 }
166 #page1 > .p1_words {
167     font-size: 2.134rem;
168     position: absolute;
169     right: 0;
170     bottom: 48px;
171     left: 0;
172     text-align: center;
173     color: #231815;
174 }
175 
176 /* page2 */
177 #page2 {
178     display: none;
179     -webkit-transition: .5s;/*transition过渡*/
180             transition: .5s;
181 }
182 /*特效部分*/
183 #page2.fadeOut { /*第二页自动离开*/
184     opacity: .3;/*transform变换*/
185     -webkit-transform: translate(0,-100%);
186             transform: translate(0,-100%);/*偏移：水平  竖直*/
187 }
188 /*过渡小效果*/
189 #page2 .bg p2_bg_loading{
190     z-index: 4;
191     background: #ef1639;
192     -webkit-animation: p2_bg_loading 1s linear forwards;/*forwards动画完成后，保持最后一个属性值*/
193             animation: p2_bg_loading 1s linear forwards;
194 }
195 @-webkit-keyframes p2_bg_loading {
196     0% {
197         opacity: 1;
198     }
199     100% {
200         opacity: 0;
201     }
202 }
203 @keyframes p2_bg_loading {
204     0% {
205         opacity: 1;
206     }
207     100% {
208         opacity: 0;
209     }
210 }
211 
212 #page2 > .bg {
213     background: url("../images/p2_bg.jpg") no-repeat center;
214     background-size: 100%;/*让图片充斥整个背景*/
215 }
216 #page2 > .p2_circle {/*外圈*/
217     position: absolute;
218     top: 0;
219     right: 0;
220     bottom: 0;
221     left: 0;
222     margin: auto;
223     /*border-radius: 50%;
224     content:"";*//*因为本身就是一个圆形图片，所以写不写都无所谓*/
225     background: url("../images/p2_circle_outer.png") no-repeat center;
226     background-size: 100%;
227     width: 59.375vw;
228     height: 59.375vw;
229 
230     /*特效部分*/
231     -webkit-animation: p2_circle_outer 1s linear 3s infinite;/*1s圈  等速  延迟3s再转  重复*/
232          -o-animation: p2_circle_outer 1s linear 3s infinite;
233             animation: p2_circle_outer 1s linear 3s infinite;
234 }
235 @-webkit-keyframes p2_circle_outer {
236     0% {
237         -webkit-transform: rotate(0deg);/*rotate旋转*/
238                 transform: rotate(0deg);
239     }
240     100% {
241         -webkit-transform: rotate(-360deg);/*逆转1圈*/
242                 transform: rotate(-360deg);
243     }
244 }
245 @keyframes p2_circle_outer {
246     0% {
247         -webkit-transform: rotate(0deg);/*rotate旋转*/
248                 transform: rotate(0deg);
249     }
250     100% {
251         -webkit-transform: rotate(-360deg);/*逆转1圈*/
252         transform: rotate(-360deg);
253     }
254 }
255 
256 #page2 > .p2_circle:before {/*中圈*/
257     position: absolute;
258     top: 0;
259     right: 0;
260     bottom: 0;
261     left: 0;
262     margin: auto;
263     /*border-radius: 50%;
264     content:"";*/
265     border-radius: 50%;
266     content:"";
267     background: url("../images/p2_circle_middle.png") no-repeat center;
268     background-size: 100%;
269     width: 45.625vw;
270     height: 45.625vw;
271 
272     /*特效部分*/
273     -webkit-animation: p2_circle_middle 1s linear 2s infinite;/*1s圈  等速  延迟2s再转  重复*/
274          -o-animation: p2_circle_middle 1s linear 2s infinite;
275             animation: p2_circle_middle 1s linear 2s infinite;
276 }
277 @-webkit-keyframes p2_circle_middle {
278     0% {
279         -webkit-transform: rotate(0deg);/*rotate旋转*/
280                 transform: rotate(0deg);
281     }
282     100% {
283         -webkit-transform: rotate(720deg);/*顺转2圈*/
284                 transform: rotate(720deg);
285     }
286 }
287 @keyframes p2_circle_middle {
288     0% {
289         -webkit-transform: rotate(0deg);/*rotate旋转*/
290                 transform: rotate(0deg);
291     }
292     100% {
293         -webkit-transform: rotate(720deg);/*顺转2圈*/
294                 transform: rotate(720deg);
295     }
296 }
297 
298 #page2 > .p2_circle:after {/*内圈*/
299     position: absolute;
300     top: 0;
301     right: 0;
302     bottom: 0;
303     left: 0;
304     margin: auto;
305     /*border-radius: 50%;
306     content:"";*/
307     border-radius: 50%;
308     content:"";
309     background: url("../images/p2_circle_inner.png") no-repeat center;
310     background-size: 100%;
311     width: 39.9375vw;
312     height: 39.9375vw;
313 
314     /*特效部分*/
315     -webkit-animation: p2_circle_inner 1s linear 1s infinite;/*1s圈  等速  延迟1s再转  重复*/
316          -o-animation: p2_circle_inner 1s linear 1s infinite;
317             animation: p2_circle_inner 1s linear 1s infinite;
318 }
319 @-webkit-keyframes p2_circle_inner {
320     0% {
321         -webkit-transform: rotate(0deg);/*rotate旋转*/
322                 transform: rotate(0deg);
323     }
324     100% {
325         -webkit-transform: rotate(-1080deg);/*逆转3圈*/
326                 transform: rotate(-1080deg);
327     }
328 }
329 @keyframes p2_circle_inner {
330     0% {
331         -webkit-transform: rotate(0deg);/*rotate旋转*/
332                 transform: rotate(0deg);
333     }
334     100% {
335         -webkit-transform: rotate(-1080deg);/*逆转3圈*/
336                 transform: rotate(-1080deg);
337     }
338 }
339 #page2 > .p2_2018 {
340     position: absolute;
341     top: 0;
342     right: 0;
343     bottom: 0;
344     left: 0;
345     margin: auto;
346     background: url("../images/p2_2018.png") no-repeat center;
347     background-size: 100%;
348     width: 27.5vw;
349     height: 6.24vh;
350 
351     /*特效部分*/
352     -webkit-animation: p2_2018 .5s infinite alternate; /*闪烁0.5秒  无限  可以反向（从大到小从小到大）*/
353     -o-animation: p2_2018 .5s infinite alternate;
354     animation: p2_2018 .5s infinite alternate;
355 }
356 @-webkit-keyframes p2_2018 {
357     0% {
358         opacity: .5;
359         -webkit-transform: scale(.5,.5);/*scale缩小*/
360         transform: scale(.5,.5);/*水平80%  竖直80%*/
361     }
362     100% {
363         opacity: 1;
364     }
365 }
366 @keyframes p2_2018 {
367     0% {
368         opacity: .5;
369         -webkit-transform: scale(.5,.5);/*scale缩小*/
370         transform: scale(.5,.5);/*水平80%  竖直80%*/
371     }
372     100% {
373         opacity: 1;
374     }
375 }
376 
377 
378 /* page3 */
379 #page3 {
380     display: none;
381     -webkit-transition: .5s;/*transition过渡*/
382             transition: .5s;
383 }
384 /*特效部分*/
385 #page3.fadeIn {/*第三页进入*/
386     -webkit-transform: translate(0,-100%);/*从下面上来*/
387             transform: translate(0,-100%);/*偏移：水平  竖直*/
388 }
389 #page3 > .bg {
390     background: url("../images/p3_bg.jpg") no-repeat center;
391     background-size: 100%;/*让图片充斥整个背景*/
392 }
393 #page3 > .p3_logo {
394     width: 28.6875vw;
395     height: 30.327vh;
396     position: absolute;
397     top: 0;
398     right: 0;
399     left: 0;
400     margin: auto;
401     background: url("../images/baozi.png") no-repeat center;
402     background-size: 100%;
403 }
404 #page3 > .p3_title {
405     width: 48.125vw;
406     height: 50vh;
407     position: absolute;
408     top: 21vh;
409     right: 0;
410     left: 0;
411     margin: auto;
412     background: url("../images/p3_title.png") no-repeat center;
413     background-size: 100%;
414 
415     /*特效部分*/
416     -webkit-animation: p3_title 1.5s infinite ; /*闪烁1.5秒*/
417          -o-animation: p3_title 1.5s infinite ;
418             animation: p3_title 1.5s infinite ;
419 }
420 @-webkit-keyframes p3_title {
421     0% {
422         opacity: 0;
423     }
424     100% {
425         opacity: 1;
426     }
427 }
428 @keyframes p3_title {
429     0% {
430         opacity: 0;
431     }
432     100% {
433         opacity: 1;
434     }
435 }
436 
437 #page3 > .p3_blessing {
438     width: 32vw;
439     height: 32vw;
440     position: absolute;
441     right: 0;
442     bottom: 10vh;
443     left: 0;
444     margin: auto;
445     /*border-radius: 50%;*/
446     background: url("../images/p3_blessing.png") no-repeat center;
447     background-size: 100%;
448 
449     /*特效部分*/
450     -webkit-animation: p3_blessing 2s linear infinite;/*2s一个周期  等速  重复*/
451             animation: p3_blessing 2s linear infinite;
452 }
453 @-webkit-keyframes p3_blessing {
454     0% {
455         -webkit-transform: rotate(0deg);/*rotate旋转*/
456                 transform: rotate(0deg);
457     }
458     100% {
459         -webkit-transform: rotate(360deg);/*顺转1圈*/
460                 transform: rotate(360deg);
461     }
462 }
463 @keyframes p3_blessing {
464     0% {
465         -webkit-transform: rotate(0deg);/*rotate旋转*/
466                 transform: rotate(0deg);
467     }
468     100% {
469         -webkit-transform: rotate(360deg);/*顺转1圈*/
470                 transform: rotate(360deg);
471     }
472 }

style.css

px就是像素值，em就是根据基准来缩放字体的大小。em是相对于父元素的属性而计算的，rem是相对于根元素

box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

animation动画

特效

使用animation和keyframes

效果1-1、光盘转动

效果1-2、红灯笼闪烁

效果2-3、三个圈转

效果3-3、福字转动

自己

1、2018闪耀

2、新年快乐出现

交互

 1 /**
 2  * Created by SANDY on 2018.1.31.
 3  */
 4 
 5 window.onload = function () {
 6     /*获取元素*/
 7     var page1 = document.getElementById("page1");
 8     var page2 = document.getElementById("page2");
 9     var page3 = document.getElementById("page3");
10 
11     /*相当于defer*/
12     var music = document.getElementById("music");
13     var audio = document.getElementsByTagName("audio")[0];/*getElementsByTagName获取到的是一个数组，标明我们要的是第一个，所以给下标[0]*/
14 
15     /*当音乐播放完成时候，光盘停止旋转*/
16     audio.addEventListener("ended",function (event) {/*监听事件*/
17         music.setAttribute("class","");
18 
19     },false)
20 
21     /*music.onclick = function () {/!*点击，onclik有0.3秒的延迟*!/
22         /!*点击：音乐暂停时播放，播放时暂停*!/
23         if(audio.paused) {
24             audio.play();
25             this.setAttribute("class","play");/!*播放时给class值为play，但是停止时光盘马上回到0度（原始位置）*!/
26             /!*setAttribute() 方法添加指定的属性，并为其赋指定的值。
27              如果这个指定的属性已存在，则仅设置/更改值。*!/
28             //this.style.animationPlayState = "running";/!*停止时光盘不会回到起始位置，但是兼容性有问题*!/
29             /!*animation-play-state 属性规定动画正在运行还是暂停。*!/
30         }else {
31             audio.pause();
32             this.setAttribute("class","");/!*暂停时不给class值*!/
33             //this.style.animationPlayState = "paused";
34         }
35 
36     }
37     /!*相当于defer*!/*/
38 
39     /*实现在手机端的运用*/
40     music.addEventListener("touchstart",function (even) {
41          if(audio.paused) {
42             audio.play();
43             this.setAttribute("class","play");
44          }else {
45              audio.pause();
46             this.setAttribute("class","");
47             }
48     },false)
49 
50     /*第一页点击翻页*/
51     page1.addEventListener("touchstart",function (event) {
52         page1.style.display = "none";
53         page2.style.display = "block";
54         page3.style.display = "block";
55         page3.style.top     = "100%";/*在页面的最下面*/
56 
57         setTimeout(function () {
58             page2.setAttribute("class","page fadeOut")
59             page3.setAttribute("class","page fadeIn")
60         },5500);/*5500ms后*/
61     },false);
62 
63 
64 }

script.js

music控制

format-detection