Merry Christmas HTML

简单分享 Merry Christmas HTML 设计的核心代码

HTML:

<body class="card">
<div class="dialog"><div class="dialog-in"><div class="dialog-msg"><div class="heading">You've got a post card!</div><a class="play" onclick="openCard()">View</a></div></div></div><div class="header"><div class="heading">Merry Christmas!</div></div><div class="deer"><img class="deer-body" src="img/deer-body.png" alt=""><img class="deer-left-hand" src="img/deer-left-hand.png" alt=""><img class="deer-gift3" src="img/deer-gift3.png" alt=""><img class="deer-gift2" src="img/deer-gift2.png" alt=""><img class="deer-gift1" src="img/deer-gift1.png" alt=""><img class="deer-scarf" src="img/deer-scarf.png" alt=""><img class="deer-right-hand" src="img/deer-right-hand.png" alt="" ><img class="deer-left-leg" src="img/deer-left-leg.png" alt=""><img class="deer-right-leg" src="img/deer-right-leg.png" alt=""></div><div class="penguin"><div class="peng-left-hand">     <img class="peng-letter" src="img/peng-letter.png" alt=""><img class="peng-left-hand-pic" src="img/peng-left-hand.png" alt=""></div><img class="peng-right-hand" src="img/peng-right-hand.png" alt=""><img class="peng-body" src="img/peng-body.png" alt=""></div><div class="santa"><img class="santa-body" src="img/santa-body.png" alt=""><img class="santa-left-hand" src="img/santa-left-hand.png" alt=""><img class="santa-right-hand" src="img/santa-right-hand.png" alt=""><div class="santa-baloon"><img class="baloon" src="img/santa-baloon.png" alt=""><div class="santa-text"></div></div> <img class="santa-left-leg" src="img/santa-left-leg.png" alt=""><img class="santa-right-leg" src="img/santa-right-leg.png" alt=""></div><div class="dwarf"><img class="dwarf-body" src="img/dwarf-body.png" alt=""><img class="dwarf-left-leg" src="img/dwarf-left-leg.png" alt=""><img class="dwarf-right-leg" src="img/dwarf-right-leg.png" alt=""><img class="dwarf-box" src="img/dwarf-box.png" alt=""></div><audio src="mp3/music.mp3" class="music" autoplay loop></audio><canvas id="canvas"></canvas><script src="js/fireworks.js"></script><script>
function openCard(){document.querySelector('.dialog').style.display = 'none';document.querySelector('.music').play();fireworks();document.querySelector('body').classList.add('active');}
</script></body>

CSS:

:root {--size: 200px;--size-md: 150px;--size-sm: 120px;}*{box-sizing: border-box;
}img{max-width: 100%;
}body,html{height: 100%;overflow: hidden;
}
body{background-image: url('../img/bg.jpg');background-position: center center;background-size: cover;background-color: rgb(167, 232, 243);margin: 0;text-align: center;font-family: 'Playfair Display SC', serif;
}.dialog{display: table;
position: absolute;
background-color: rgba(0,0,0,0.9);
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
}.dialog-in{
display: table-cell;
vertical-align: middle;
}.heading{
color:  rgb(245, 32, 103);
font-size: 50px;
margin: 50px 0;
}.play{display: inline-block;text-decoration: none;padding: 10px 20px;background-color: rgb(245, 32, 103);border-radius: 30px;color: #fff;cursor: pointer;
}.deer{position: absolute;width: var(--size);bottom: 30%;left: 50%;margin-left: 5%;
}
.active .deer{animation: deer-body 4s ease-in-out infinite;}@keyframes deer-body{0%{bottom: -40%;}50%{bottom: 40%;transform: rotate(-20deg);}100%{bottom: -40%;}
}.deer-body{position: relative;z-index: 1;
}.deer-left-hand{position: absolute;width: 30%;top: 59%;left: -15%;transform-origin: 100% 80%;
}
@keyframes deer-lh{0%{transform: rotate(-20deg);}30%{transform: rotate(-20deg);}50%{transform: rotate(10deg);}100%{transform: rotate(10deg);}
}.active .deer-left-hand{animation: deer-lh 4s ease-in-out infinite; 
}.deer-gift3{position: absolute;width: 50%;top: 25%;left: -31%;
}.active .deer-gift3{animation: deer-gift3 4s ease-in-out infinite; 
}@keyframes deer-gift3{0%{top: 35%;}30%{top: 35%;}50%{top: 15%;}60%{top: 20%;}100%{top: 20%;}
}.peng-left-hand-pic{position: relative;
}
.peng-left-hand{position: absolute;width: 30%;top: 12%;left: 0;transform-origin: 100% 100%;
}.active .peng-left-hand{animation: peng-lh 4s ease-in-out infinite;
}@keyframes peng-lh{30%{transform: rotate(30deg);}35%{transform: rotate(-30deg);}40%{transform: rotate(30deg);}45%{transform: rotate(-30deg);}50%{transform: rotate(30deg);}55%{transform: rotate(-30deg);}60%{transform: rotate(30deg);}
}.peng-letter{position: absolute;width: 100%;bottom: 70%;right: 10%;
}.peng-right-hand{position: absolute;width: 30%;top: 62%;left: 82%;
}.santa{position: absolute;width: var(--size);bottom: 30%;right: 50%;margin-right: 5%;transform-origin: 120% 0;transform: rotate(-10deg);
}.active .santa{animation: santa-body 4s linear infinite, santa-body-swing 2s linear infinite;
}@keyframes santa-body-swing{50%{transform: rotate(-30deg);}
}
@keyframes santa-body{25%{bottom: 20%;}50%{right: 60%;bottom: 25%;}75%{bottom: 30%;right: 55%;}
}

JS:

function fireworks() {var canvas = document.querySelector('#canvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;var ctx = canvas.getContext('2d');// initctx.fillStyle = 'transparent';// ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.clearRect(0, 0, canvas.width, canvas.height);// objectsvar listFire = [];var listFirework = [];var fireNumber = 10;var center = {x: canvas.width / 2,y: canvas.height / 2};var range = window.innerWidth / 3;for (var i = 0; i < fireNumber; i++) {var fire = {x: Math.random() * range / 2 - range / 4 + center.x,y: Math.random() * range * 2 + canvas.height,size: Math.random() + 0.5,fill: '#fd1',vx: Math.random() - 0.5,vy: -(Math.random() + 4),ax: Math.random() * 0.02 - 0.01,far: Math.random() * range + (center.y - range)};fire.base = {x: fire.x,y: fire.y,vx: fire.vx};//listFire.push(fire);}function randColor() {var r = Math.floor(Math.random() * 256);var g = Math.floor(Math.random() * 256);var b = Math.floor(Math.random() * 256);var color = 'rgb($r, $g, $b)';color = color.replace('$r', r);color = color.replace('$g', g);color = color.replace('$b', b);return color;}(function loop() {requestAnimationFrame(loop);update();draw();})();function update() {for (var i = 0; i < listFire.length; i++) {var fire = listFire[i];//if (fire.y <= fire.far) {// case add fireworkvar color = randColor();for (var i = 0; i < fireNumber * 5; i++) {var firework = {x: fire.x,y: fire.y,size: Math.random() + 1.5,fill: color,vx: Math.random() * 5 - 2.5,vy: Math.random() * -5 + 1.5,ay: 0.05,alpha: 1,life: Math.round(Math.random() * range / 2) + range / 2};firework.base = {life: firework.life,size: firework.size};listFirework.push(firework);}// resetfire.y = fire.base.y;fire.x = fire.base.x;fire.vx = fire.base.vx;fire.ax = Math.random() * 0.02 - 0.01;}//fire.x += fire.vx;fire.y += fire.vy;fire.vx += fire.ax;}for (var i = listFirework.length - 1; i >= 0; i--) {var firework = listFirework[i];if (firework) {firework.x += firework.vx;firework.y += firework.vy;firework.vy += firework.ay;firework.alpha = firework.life / firework.base.life;firework.size = firework.alpha * firework.base.size;firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;//firework.life--;if (firework.life <= 0) {listFirework.splice(i, 1);}}}}function draw() {// clearctx.globalCompositeOperation = 'source-over';ctx.globalAlpha = 0.18;ctx.fillStyle = 'transparent';// ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.clearRect(0, 0, canvas.width, canvas.height);// re-drawctx.globalCompositeOperation = 'screen';ctx.globalAlpha = 1;for (var i = 0; i < listFire.length; i++) {var fire = listFire[i];ctx.beginPath();ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);ctx.closePath();ctx.fillStyle = fire.fill;ctx.fill();}for (var i = 0; i < listFirework.length; i++) {var firework = listFirework[i];ctx.globalAlpha = firework.alpha;ctx.beginPath();ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);ctx.closePath();ctx.fillStyle = firework.fill;ctx.fill();}}}