先上效果图片，再上代码

效果

JS关键代码

//下雪效果
function snow(){

    const canvas = document.getElementById("background");
    const ctx = canvas.getContext("2d");

    const width = window.innerWidth;
    const height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;

    //Set number of snowflakes
    let numberFlakes = 400;
    let snowflakes = [];

    for(let i = 0; i < numberFlakes; i++){
        snowflakes.push({
            x: Math.random()*width,
            y: Math.random()*height,
            r: Math.random()*3+1,
            d: Math.random() + 2
        })
    }

    //Draw the snowflakes
    function drawFlakes(){
        ctx.clearRect(0, 0, width, height);
        ctx.fillStyle = "white";
        ctx.beginPath();

        for(let i = 0; i < numberFlakes; i++){
            let sf = snowflakes[i];
            ctx.moveTo(sf.x, sf.y);
            ctx.arc(sf.x, sf.y, sf.r, 0, Math.PI*2, true);
        }
        ctx.fill();
        moveFlakes();
    }

    //Move the snowflakes
    function moveFlakes(){
        for(let i = 0; i < numberFlakes; i++){
            let sf = snowflakes[i];
            sf.y += Math.pow(sf.d, 2) + 1;

            if(sf.y > height){
                snowflakes[i] = {
                    x: Math.random()*width, y: 0, r: sf.r, d: sf.d
                };
            }
        }
    }
    //Snowflake animation
    setInterval(drawFlakes, 26);
}

//新春倒计时
//11am on December 25th
const countDownDate = new Date("February 11, 2021, 00:00:00").getTime();

const x = setInterval(function(){
    //Today's date + time
    let now = new Date().getTime();
    let distance = countDownDate - now;

    //Calculations for days/hours/minutes/seconds
    let days = Math.floor(distance / (1000*60*60*24));
    let hours = Math.floor((distance % (1000*60*60*24)) / (1000*60*60));
    let minutes = Math.floor((distance % (1000*60*60)) / (1000*60));
    let seconds = Math.floor((distance % (1000*60)) / 1000);

    document.getElementById("countdown").innerHTML = days + "天 " + hours + "时 " + minutes + "分" + seconds + "秒";

    if(distance < 0){
        clearInterval(x);
        document.getElementById("message").innerHTML = "2021新年倒计时!";
        document.getElementById("countdown").innerHTML = "- 0 - 0 - 0 - 0 -"
    }
}, 1000);

HTML

<html lang="en">
<head>
<meta charset="UTF-8">
<title> canvas 2021新年倒计时下雪背景</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body onload="snow()">

<canvas id="background" width="1872" height="909"></canvas>
<div class="container">
	<div class="h1"><h1 id="message">2021新年倒计时</h1></div>
	<div id="countdown">15天 12时 7分10秒</div>
</div>

<script src="js/script.js"></script>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0; 
}

body {
    background-image: url("../img/214.jpg");
    background-color: #FFFFFF;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow-x: hidden;
    overflow-y: hidden;
}

.h1 {
    font-family: 'Italianno', cursive;
    color: #E1E1E1; 
    text-align: center;
    font-size: 38px;
    letter-spacing: 0.1em;
    text-shadow: 3px 2px #333333;
    width: 100%;
}

#countdown {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    font-family: arial;
    font-size: 38px;
    color: #E1E1E1;
    text-shadow: 3px 2px #333333;
    text-align: center;
    padding: 15px;
    border: 10px solid #E1E1E1;
    width: 700px;
    font-family: 'Lora', serif; 
    box-shadow: 3px 3px 3px #333333;
    width: 55%;
    
}

.container {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 66%;
    height: 50vh;
}

新年了做一个新年倒计时前加上一个浪漫的雪花飞舞效果

效果

JS关键代码

HTML

CSS

猜你喜欢