首页html满屏往右飘雪特效

html满屏往右飘雪特效

时间: 2023-08-24 11:07:08 浏览: 128

以下是一个基于HTML和CSS的满屏往右飘雪特效： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>Snow Effect</title> <style type="text/css"> body { background-color: #000; overflow: hidden; } .snowflake { position: absolute; color: #fff; font-size: 2em; font-family: Arial, sans-serif; pointer-events: none; } </style> </head> <body> <script type="text/javascript"> var snowflakes = [], maxSnowflakes = 50, body = document.body; for (var i = 0; i < maxSnowflakes; i++) { var snowflake = document.createElement("div"); snowflake.className = "snowflake"; snowflake.innerHTML = "❅"; snowflake.style.top = "-50px"; snowflake.style.left = Math.random() * body.offsetWidth + "px"; snowflake.style.animationDelay = Math.random() * 3 + "s"; snowflake.style.animationDuration = Math.random() * 5 + 5 + "s"; snowflakes.push(snowflake); body.appendChild(snowflake); } </script> </body> </html> ``` CSS代码： ``` .snowflake { animation-name: snowfall; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes snowfall { from { transform: translate(0, 0); } to { transform: translate(100vw, 100vh); } } ``` 解释： 1. 首先，在`<head>`标签中，定义了一个黑色背景和隐藏滚动条的样式。 2. 在`<body>`标签中，使用JavaScript动态创建了50个雪花`<div>`元素，并添加到了页面中。 3. 在CSS中，定义了雪花的样式，包括了字体大小、颜色、字体和禁止鼠标事件。 4. 使用`@keyframes`关键字定义了一个名为`snowfall`的动画，该动画将雪花从初始位置向右下方飘动，直到超出屏幕范围。在`.snowflake`类中使用`snowfall`动画，并设置了动画的一些参数。 5. 最后，将以上代码整合到一起，即可实现一个满屏往右飘雪的特效。

阅读全文