Merry Christmas HTML

news2024/12/26 12:05:22

简单分享 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');
    // init
    ctx.fillStyle = 'transparent';
    // ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // objects
    var 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 firework
    var 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);
    }
    // reset
    fire.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() {
    // clear
    ctx.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-draw
    ctx.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();
    }
    }
    }