HTML、css、javascript 实现新年红包

橙色偶然 發表於 2020-2-6 10:04:00

上图！
<img src="https://img2018.cnblogs.com/common/1543983/202002/1543983-20200206095424194-659349775.gif">
html代码：
<div class="cnblogs_code">
<pre> 1 <div class="wrapper shake" id="wrapper">
 2 <div id="header-box">
 3 </div>
 4 <div id="box" class="box">
 5 <div id="content-box">
 6 <img id="img" src="./img/bqb/3.jpg" />
 7 </div>
 8 <div id="confim"></div>
 9 <div id="refuse"></div>
10 </div>
11 </div></pre>
</div>
css代码：
<div class="cnblogs_code">
<pre> 1 * {
 2 margin: 0;
 3 padding: 0;
 4 user-select: none;
 5 /* 文本不能被选择 */
 6 }
 7
 8 body {
 9 background-image: url(./img/BG.jpg);
10 background-size: cover;
11 overflow: hidden;
12 }
13
14 .wrapper {
15 width: 350px;
16 height: 470px;
17 position: absolute;
18 top: 50%;
19 left: 50%;
20 margin-top: -250px;
21 margin-left: -175px;
22 background-image: url(./img/red_above.png);
23 background-size: cover;
24 }
25
26 .shake {
27 animation: shaking .3s infinite;
28 }
29
30 @keyframes shaking {
31 0% {
32 transform: rotateZ(-6deg);
33 }
34
35 50% {
36 transform: rotateZ(6deg);
37 }
38
39 100% {
40 transform: rotateZ(-6deg);
41 }
42 }
43
44 #header-box {
45 color: antiquewhite;
46 font-size: 16px;
47 width: 230px;
48 margin: 40px auto 0;
49 }
50
51 #content-box {
52 width: 180px;
53 height: 180px;
54 text-align: center;
55 margin: 50px auto 0;
56 overflow: hidden;
57 }
58
59 #content-box img {
60 width: 180px;
61 height: 180px;
62 }
63
64 #confim {
65 width: 120px;
66 height: 40px;
67 background-image: url(./img/send_money.png);
68 background-size: cover;
69 position: absolute;
70 bottom: 30px;
71 left: 50px;
72 }
73
74 #refuse {
75 width: 130px;
76 height: 38px;
77 background-image: url(./img/refuse.png);
78 background-size: cover;
79 position: absolute;
80 bottom: 34px;
81 left: 180px;
82 }
83
84 .box {
85 opacity: 0;
86 display: none;
87
88 }
89
90
91 .box-show {
92 opacity: 1;
93 display: block;
94
95 }</pre>
</div>
javascript代码：
<div class="cnblogs_code">
<pre> 1 var data = ["./img/bqb/1.jpg", "./img/bqb/2.jpg", "./img/bqb/4.jpg", "./img/bqb/5.jpg", "./img/bqb/6.gif"];
 2 // 点击反转逻辑
 3 var box = document.getElementById("box");
 4 var wrapper = document.getElementById("wrapper");
 5 var confim = document.getElementById("confim");
 6 var refuse = document.getElementById("refuse");
 7 var img = document.getElementById("img");
 8 wrapper.onclick = function() {
 9 wrapper.onclick = null;
10 // return;
11 wrapper.className = "wrapper";
12 wrapper.style.backgroundImage = "url(./img/red-action.gif)";
13 setTimeout(renderWord, 600);
14 };
15 // 文字动态出现逻辑
16 var title = document.getElementById("header-box");
17 var str =
18 "银花万簇迎金鼠，火树千株展玉龙。今朝天好地好，紫气东来大吉祥；今朝国安民安，丰衣足食合家欢。鼠年到了，愿您新春新气象，祝您人好家团圆。";
19
20 function renderWord() {
21 var index = 0;
22 var t = setInterval(function() {
23 index++;
24 title.innerHTML = str.slice(0, index);
25 if (index == str.length) {
26 clearInterval(t);
27 box.className = "box-show";
28 }
29 }, 10);
30 }
31
32 //绑定事件
33 var state = 1;
34 refuse.onclick = function() {
35 if (state == 1) {
36 img.src = data.shift();
37 if (data.length == 0) {
38 state = 2;
39 refuse.onmouseenter = function() {
40 refuse.style.top = Math.random() * 500 + "px";
41 refuse.style.left = Math.random() * 500 + "px";
42 }
43 refuse.style.top = Math.random() * 500 + "px";
44 refuse.style.left = Math.random() * 500 + "px";
45 }
46 } else if (state == 2) {
47 refuse.parentElement.removeChild(refuse);
48 }
49 };
50 confim.onclick = function() {
51 img.src = "./img/bqb/ewm.png";
52 state = 3;
53
54 }</pre>
</div>
 
 
 
欢迎━(*｀∀´*)ノ━ｨ!  大家留言讨论哦！ 
来源：https://www.cnblogs.com/hjysunshine/p/12267716.html

頁: [1]

琼殿技术论坛's Archiver

HTML、css、javascript 实现新年红包