CSS3 HTML5下雪特效雪花飘飘

最新推荐文章于 2025-06-23 12:01:36 发布

夏末_阳光依然耀眼

最新推荐文章于 2025-06-23 12:01:36 发布

阅读量3.4k

点赞数 2

分类专栏： html5+css3 文章标签： css3 div jquery html5

html5+css3 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas和CSS3实现的下雪特效方法。通过JavaScript控制雪花的位置、速度和透明度等属性，使得页面上能够呈现出逼真的雪花飘落效果。该特效适用于节日主题网站或增添冬季氛围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>CSS3 HTML5下雪特效 雪花飘飘</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    makeSnow("christmasSnow", "bg.jpg");
});
function makeSnow(canvasId, imagePath) {
    var christmasSnow = new ChristmasSnow(canvasId, imagePath);
    renderAndUpdate.christmasSnow = christmasSnow;
    setInterval(renderAndUpdate, 15);
}
function renderAndUpdate() {
    renderAndUpdate.christmasSnow.render();
    renderAndUpdate.christmasSnow.update();
}
function ChristmasSnow(canvasId, imagePath) {
    var snowElement = document.getElementById(canvasId);
    this.canvasContext = snowElement.getContext("2d");
    this.width = snowElement.clientWidth;
    this.heigth = snowElement.clientHeight;
    this.image = initImage(imagePath);
    this.snow = initSnow(this.width, this.heigth);
}
function initImage(imagePath) {
    var image = new Image();
    image.src = imagePath;
    return image;
}
function initSnow(width, height) {
    var minRasius = 3,
        maxRadius = 10,
        minSpeedY = 1,
        maxSpeedY = 3,
        speedX = 0.05,
        minAlpha = 0.5,
        maxAlpha = 1.0,
        minMoveX = 4,
        maxMoveX = 18;
    var snowSettings = new SnowSettings(minRasius, maxRadius, width, height, minSpeedY, maxSpeedY, speedX, minAlpha, maxAlpha, minMoveX, maxMoveX);
    var snow = [];
    var snowNumber = 200;
    for(var i = 0; i < snowNumber; ++i) {
        snow[i] = new Snow(snowSettings);
    }
    return snow;
}
ChristmasSnow.prototype.render = function() {
    this.canvasContext.drawImage(this.image, 0, 0);
    for(var i = 0; i < this.snow.length; ++i) {
        this.snow[i].render(this.canvasContext);
    }
}
ChristmasSnow.prototype.update = function() {
    for(var i = 0; i < this.snow.length; ++i) {
        this.snow[i].update();
    }
}
function SnowSettings(minRadius, maxRadius, maxX, maxY, minSpeedY, maxSpeedY, speedX, minAlpha, maxAlpha, minMoveX, maxMoveX) {
    this.minRadius = minRadius;
    this.maxRadius = maxRadius;
    this.maxX = maxX;
    this.maxY = maxY;
    this.speedX = speedX;
    this.minSpeedY = minSpeedY;
    this.maxSpeedY = maxSpeedY;
    this.minAlpha = minAlpha;
    this.maxAlpha = maxAlpha;
    this.minMoveX = minMoveX;
    this.maxMoveX = maxMoveX;
}
function Snow(snowSettings) {
    this.snowSettings = snowSettings;
    this.radius = randomInRange(snowSettings.minRadius, snowSettings.maxRadius);
    this.initialX = Math.random() * snowSettings.maxX;
    this.y = Math.random() * snowSettings.maxY;
    this.speedY = randomInRange(snowSettings.minSpeedY, snowSettings.maxSpeedY);
    this.speedX = snowSettings.speedX;
    this.alpha = randomInRange(snowSettings.minAlpha, snowSettings.maxAlpha);
    this.angle = Math.random(Math.PI * 2);
    this.x = this.initialX + Math.sin(this.angle);
    this.moveX = randomInRange(snowSettings.minMoveX, snowSettings.maxMoveX);
}
Snow.prototype.render = function(canvasContext) {
    canvasContext.fillStyle = "rgba(255, 255, 255, " + this.alpha + ")";
    canvasContext.beginPath();
    canvasContext.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    canvasContext.closePath();
    canvasContext.fill(); 
}
Snow.prototype.update = function() {
    this.y += this.speedY;
    if (this.y > this.snowSettings.maxY) {
        this.y -= this.snowSettings.maxY;
    }
    this.angle += this.speedX;
    if (this.angle > Math.PI * 2) {
        this.angle -= Math.PI * 2;
    }
    this.x = this.initialX + this.moveX * Math.sin(this.angle);
}
function randomInRange(min, max) {
    var random = Math.random() * (max - min) + min;
    return random;
}
</script>
<style type="text/css">
body{ margin:0; padding:0; background:#181c59; }
.main{ width:1210px; height:720px; margin:0 auto;}
</style>
</head>
<body>
	<div class="main">
    <canvas id="christmasSnow" width="1210px" height="720px">
        您的浏览器不支持 HTML5 canvas标签，无法看到下雪效果.
    </canvas>
    </div>
</body>
</html>

用到的图片：