这段代码创建了一个具有动态雪球效果的页面，通过 CSS 和 JavaScript 技术实现了雪花的生成和飘落效果，为页面添加了视觉吸引力和互动性。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你
演示效果
HTML&CSS
html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
link rel="preconnect" href="https://fonts.googleapis.com">
link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/gsap.min.js">script>
title>公众号关注：前端Hardytitle>
style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 90vh;
background-color: hsl(210, 60%, 15%);
}
#snowball {
clip-path: circle(50%);
width: 200px;
height: 200px;
}
.snowflake-area {
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
background: radial-gradient(circle,
rgba(255, 255, 255, 0.05) 60%,
rgba(255, 255, 255, 0.2) 80%);
}
.snowflake-area::before {
content: "";
filter: blur(1px);
position: absolute;
width: 50%;
height: 30%;
top: 2%;
left: 25%;
border-radius: 50%;
background-image: linear-gradient(to bottom,
rgba(255, 255, 255, 0.15),
rgba(255, 255, 255, 0));
}
.snowflake-area::after {
content: "";
border-radius: 30%;
width: 200px;
height: 200px;
position: absolute;
z-index: -1;
bottom: -100px;
left: 0px;
transform: perspective(150px) rotatex(80deg);
filter: blur(20px);
background: radial-gradient(circle,
rgba(255, 255, 255, 0.3) 10%,
hsla(210, 60%, 30%, 0.8) 25%,
rgba(255, 255, 255, 0.8) 40%);
}
button {
margin-top: 100px;
background-color: hsla(210, 60%, 100%, 0);
border: 1px solid hsla(210, 60%, 100%, 0.3);
color: hsla(210, 60%, 100%, 0.5);
padding: 8px16px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
font-size: 0.6em;
text-transform: uppercase;
font-weight: bold;
border-radius: 5px;
transition: 1s;
}
button:hover {
border: 1px solid hsla(210, 60%, 100%, 0.6);
color: hsla(210, 60%, 100%, 0.8);
}
style>
head>
body>
div class="snowflake-area">
canvas id="snowball" width="200" height="200">canvas>
div>
button onclick="createSnowflakes()">点击试试button>
script>
const spin = gsap.timeline({ paused: true });
spin.from("#snowball", {
duration: 5,
rotate: 360,
transformOrigin: "50%,50%",
ease: "expo.out"
});
const canvas = document.getElementById("snowball");
const ctx = canvas.getContext("2d");
canvas.width = 200;
canvas.height = 200;
let snowflakes = [];
function Snowflake(x, y, radius, speed, wind, alpha) {
this.x = x;
this.y = y;
this.radius = radius;
this.speed = speed;
this.wind = wind;
this.update = function () {
this.y += this.speed;
this.x += this.wind;
if (this.y > canvas.height) {
this.y = 0;
this.x = Math.random() * canvas.width;
}
};
this.draw = function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = "white";
ctx.globalAlpha = alpha;
ctx.fill();
};
}
function createSnowflakes() {
spin.restart();
snowflakes = [];
let count = Math.floor(Math.random() * 301) + 100;
for (let i = 0; i
let x = Math.random() * canvas.width;
let y = Math.random() * canvas.height;
let radius = Math.random() * 3;
let speed = Math.random() * 0.1 + 1;
let wind = Math.random() * 2 - 1;
let alpha = Math.random() * 0.6 + 0.4;
snowflakes.push(new Snowflake(x, y, radius, speed, wind, alpha));
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
snowflakes.forEach((snowflake) => {
snowflake.update();
snowflake.draw();
});
requestAnimationFrame(animate);
}
createSnowflakes();
animate();
script>
body>
html>
HTML 结构
-
snowflake-area: 创建一个类名为“snowflake-area”的 div 元素，用于包含雪花效果。 -
snowball: 创建一个 canvas 元素，用于绘制雪花球。 -
createSnowflakes: 创建一个按钮，点击时调用 createSnowflakes()函数生成雪花。
CSS 样式
-
body: 设置页面的显示方式、对齐方式、方向、高度和背景色。 -
#snowball: 设置 canvas 元素的样式，包括圆形裁剪和尺寸。 -
.snowflake-area: 设置雪花区域的样式，包括尺寸、边框半径、边框和背景渐变。 -
.snowflake-area::before: 设置雪花区域的伪元素，用于创建模糊效果。 -
.snowflake-area::after: 设置雪花区域的另一个伪元素，用于创建底部的模糊阴影。 -
button: 设置按钮的样式，包括背景色、边框、文字颜色、内边距、对齐方式、装饰、显示方式、光标、字体大小、转换和圆角。 -
button:hover: 设置鼠标悬停在按钮上时的样式，包括边框颜色和文字颜色
JavaScript 部分
1、初始化动画时间线:
使用 GSAP 创建一个时间线 spin，用于控制雪花球的旋转动画。
2、设置 Canvas:
获取 canvas 元素，并设置其宽度和高度。 创建 Snowflake 类，表示雪花，具有位置、半径、速度、风向和透明度等属性。 update()方法更新雪花的位置。 draw()方法在 canvas 上绘制雪花。、
3、生成雪花:
createSnowflakes()函数生成随机数量的雪花，并重新启动旋转动画。 每个雪花的属性（如位置、半径、速度、风向和透明度）通过随机函数生成。
4、动画循环:
animate()函数是动画的主循环，负责清除 canvas 并更新、绘制所有雪花。 使用 requestAnimationFrame 实现循环。
5、用户交互:
页面加载时调用 createSnowflakes()函数生成初始雪花。 用户点击按钮时调用 createSnowflakes()函数重新生成雪花。
