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-width:宽度等于屏幕宽度
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 Araneda - New Years.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
转载于:https://www.cnblogs.com/CiMing/p/8387267.html
相关资源：2016新春贺卡
