html5卡片设计 html贺卡

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 }