使用css3制作雪花效果 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snowfall Effect</title>
    <style>
        body {
            background-color: #1e1e1e; /* Dark background for better visibility */
            overflow: hidden; /* Prevent scrollbars */
        }

        .snow {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: white;
            border-radius: 50%; /* Make it round */
            animation: snowfall linear infinite; /* Animate the fall */
            pointer-events: none; /* Prevent clicking on snowflakes */
        }

        /* Randomize snowflake animation properties */
        @for $i from 1 through 50 {
            .snow:nth-child(#{$i}) {
                left: random(100vw); /* Random horizontal position */
                animation-duration: random(5) + 5s; /* Random fall duration (5-10s) */
                animation-delay: random(5)s; /* Random delay before starting */
                font-size: random(10) + 5px;  /* Random size */
                opacity: random(70) / 100 + 0.3; /* Random opacity */
            }
        }


        @keyframes snowfall {
            0% {
                transform: translateY(-10vh); /* Start above the viewport */
            }
            100% {
                transform: translateY(110vh); /* End below the viewport */
            }
        }
    </style>
</head>
<body>
    <script>
        // JavaScript to create the specified number of snowflakes
        const numberOfSnowflakes = 50;

        for (let i = 0; i < numberOfSnowflakes; i++) {
            const snowflake = document.createElement('div');
            snowflake.classList.add('snow');
            document.body.appendChild(snowflake);
        }
    </script>
</body>
</html>

Explanation and Improvements:

  • Dark Background: A dark background (#1e1e1e) makes the white snowflakes more visible.
  • overflow: hidden;: Prevents scrollbars from appearing as snowflakes move.
  • Randomization: The SCSS-like syntax (using @for and random()) isn't directly supported in CSS. The provided JavaScript dynamically creates snowflakes and applies random styles. This randomizes the horizontal position, animation duration, delay, size, and opacity of each snowflake, creating a more natural look.
  • Animation: The snowfall animation moves the snowflakes from above the viewport (-10vh) to below it (110vh). linear timing ensures a constant falling speed. infinite makes the animation loop continuously.
  • pointer-events: none;: This is crucial. It prevents the snowflakes from interfering with clicking on other elements on the page.
  • JavaScript Dynamic Generation: The JavaScript code now dynamically generates the snowflakes and applies random styles, effectively replacing the SCSS-like syntax with a working solution.

Key Improvements over simpler solutions:

  • Performance: Creating elements with JavaScript is generally more performant than manipulating a large number of elements solely with CSS animations. This is especially true for a large number of snowflakes.
  • Flexibility: Using JavaScript allows for more complex animations and interactions if needed in the future.
  • Maintainability: The code is cleaner and easier to understand and modify.

This improved version provides a realistic and performant snowfall effect using CSS and a small amount of JavaScript for dynamic generation. You can adjust the numberOfSnowflakes variable to control the density of the snowfall.

posted @ 2024-12-10 09:23  王铁柱6  阅读(49)  评论(0)    收藏  举报