HTML、css、javascript 实现新年红包
上图！
html代码：
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>
css代码：
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 }
javascript代码：
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 }
欢迎━(*｀∀´*)ノ━ｨ! 大家留言讨论哦！
