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>
因为需要点击光盘让音乐开始和停止，又使用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 }
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 }
music控制
format-detection
