分享一个优化版网站下雪代码

JS代码

1. // 下雪效果
   
2. function createSnowflake() {
   
3.     const snowflake = document.createElement('div');
   
4.     snowflake.classList.add('snowflake');
   
5.     snowflake.innerHTML = '❄'; // 雪花的图标可以更改
   
6. 
   
7.     const size = Math.random() * 20 + 10; // 雪花大小范围
   
8.     let initialX = Math.random() * window.innerWidth;
   
9. 
   
10.     snowflake.style.fontSize = `${size}px`;
    
11.     snowflake.style.left = `${initialX}px`;
    
12. 
    
13.     document.body.appendChild(snowflake);
    
14. 
    
15.     setTimeout(() => {
    
16.         snowflake.remove();
    
17.     }, 10000); // 与动画时间一致
    
18. }
    
19. 
    
20. function snowfall() {
    
21.     setInterval(createSnowflake, 300); // 控制雪花的生成速度
    
22. }
    
23. 
    
24. snowfall();

复制代码

CSS代码

1. * {
   
2.   box-sizing: border-box;
   
3.   margin: 0;
   
4.   padding: 0;
   
5. }
   
6. 
   
7. body {
   
8.   overflow: scroll;
   
9.   overflow-x: hidden;
   
10.   width: 100vw;
    
11.   height: 100vh;
    
12.   position: relative; /* 为伪元素定位做准备，添加相对定位 */
    
13. }
    
14. 
    
15. body::before {
    
16.   content: "";
    
17.   position: fixed; /* 设置为固定定位 */
    
18.   top: 0;
    
19.   left: 0;
    
20.   right: 0;
    
21.   bottom: 0;
    
22.   background: linear-gradient(
    
23.           135deg,
    
24.           hsl(170deg, 80%, 70%),
    
25.           hsl(190deg, 80%, 70%),
    
26.           hsl(250deg, 80%, 70%),
    
27.           hsl(320deg, 80%, 70%)
    
28.   );
    
29.   background-size: 200% 200%;
    
30.   animation: gradient-move 15s ease alternate infinite;
    
31.   z-index: -1; /* 将其层级设置得较低，避免遮挡页面内容 */
    
32. }
    
33. 
    
34. @keyframes gradient-move {
    
35.   0% {
    
36.     background-position: 0% 0%;
    
37.   }
    
38.   100% {
    
39.     background-position: 100% 100%;
    
40.   }
    
41. }

复制代码