在本教程中,我们将使用 CSS 和 vanilla JavaScript 在网页上实现动画雪花效果,正好赶上假期,来个下雪特效吧!
动画雪演示:
这正是我们在今天的教程中要做的事情。这是我们将构建的最终假日主题产品:(单击“rerun”重新运行即可查看)
See the Pen Falling Snowflakes by Envato Tuts+ (@tutsplus) on CodePen.
1.使用Holiday HTML 进行标记
对于我们的标记,我们将有两个主要容器:一个包含页面内容的主元素和一个将显示雪的雪容器snow-container元素。
<main> <h1>Happy Holidays!</h1> </main> <div id="snow-container"> </div>
2.使用 CSS 制作动画雪花样式
在此演示中,我们的主要内容具有渐变背景颜色,以赋予其夜空效果。我们使用 CSS线性渐变函数来实现这一点。
为了简单起见,假设我们在 CodePen 中构建这个动画雪,因此标记位于 HTML 选项卡中,样式位于 CSS 选项卡中,等等。
main { background: linear-gradient(to bottom, #2d91c2 0%, #1e528e 100%); display: flex; align-items: center; justify-content: center; font-family: "Pacifico", cursive; height: 100vh; padding: 20px; text-align: center; } h1 { color: white; }
这是我们的横幅现在的样子:
我们还将使用 CSS 来处理每个雪元素的动画。每个雪花都有两个动画:一个下落动画,用于处理雪花从屏幕顶部移动到底部;一个摇摆动画,用于处理雪花缓慢地从一侧移动到另一侧。
@keyframes fall { 0% { opacity: 0; } 50% { opacity: 1; } 100% { top: 100vh; opacity: 1; } } @keyframes sway { 0% { margin-left: 0; } 25% { margin-left: 50px; } 50% { margin-left: -50px; } 75% { margin-left: 50px; } 100% { margin-left: 0; } }
我们还将设置我们将在 JavaScript 中创建的雪容器snow-container和雪元素的样式。
#snow-container { height: 100vh; overflow: hidden; position: absolute; top: 0; transition: opacity 500ms; width: 100%; } .snow { animation: fall ease-in infinite, sway ease-in-out infinite; color: skyblue; position: absolute; }
此演示中的动画属性采用三个值:
name:这是我们在关键帧下创建的动画的值。
Timing:这决定了动画的进展方式。
iteration:这是动画发生的次数。我们使用无限来不断重复雪花的动画。
3. 下雪功能
现在我们可以开始有趣的部分了:下雪!首先,在 CodePen 的 JS 选项卡中,为容器元素分配一个值:
const snowContainer = document.getElementById("snow-container");
对于我们的雪花内容,我们将使用 HTML 符号 (❄ ❅ ❆):
我们将创建一个snowContent
数组来包含符号代码
const snowContent = ['❄', '❅', '❆']
为了创建飘落的雪花效果,我们需要随机化每个雪花的外观和动画。
我们将使用Math.random()
和Math.floor()
函数来处理为动画雪元素生成随机值。
const random = (num) => { return Math.floor(Math.random() * num); }
现在我们可以创建一个函数来为每个雪花生成随机样式。我们将生成随机位置、大小和动画持续时间。
const getRandomStyles = () => { const top = random(100); const left = random(100); const dur = random(10) + 10; const size = random(25) + 25; return ` top: -${top}%; left: ${left}%; font-size: ${size}px; animation-duration: ${dur}s; `; }
对于我们的持续时间和大小常量,我们添加一个固定的数字值,以确保随机生成的数字具有所添加数字的最小值(即任何雪花的动画持续时间的最低数字是 10 秒)
对于我们的顶部常量,我们指定一个负值,以便雪花从可见屏幕上方的任何百分比开始。
接下来,我们将处理将雪花附加到雪容器snow-container中。
const createSnow = (num) => { for (var i = num; i > 0; i--) { var snow = document.createElement("div"); snow.className = "snow"; snow.style.cssText = getRandomStyles(); snow.innerHTML = snowContent[random(2)] snowContainer.append(snow); } }
在此演示中,我们使用for循环创建固定数量的雪花并将它们附加到容器中。我们还随机将innerHTML 分配为数组中的任何值snowContent
。
createSnow
然后,一旦页面加载,我们将使用加载事件***器调用该函数。
window.addEventListener("load", () => { createSnow(30) });
而且下雪了!单击“rerun”重新运行即可查看动画雪花:
See the Pen Falling Snowflakes by Envato Tuts+ (@tutsplus) on CodePen.
去除雪花
我们还可以选择添加一个去除雪花的功能。
const removeSnow = () => { snowContainer.style.opacity = "0"; setTimeout(() => { snowContainer.remove() }, 500) }
在此函数中,我们将 SnowContainer 的不透明度指定为 0,以使其平滑淡出,然后半秒后,我们使用该.remove()
方法删除容器。
然后我们可以选择按照我们想要的方式调用这个函数。当用户点击页面上的任意位置时,我们可以移除雪:
window.addEventListener("click", () => { removeSnow() });
或者我们可以将它包含在 setTimeout() 函数中,以便它在一段时间后消失:
window.addEventListener("load", () => { createSnow(30) setTimeout(removeSnow, 10000) });
关闭雪花
由于我们是从头开始构建的,因此我们还可以更新元素内容和动画以创建其他有趣的效果,例如浮动气球:
See the Pen Floating Balloons by Envato Tuts+ (@tutsplus) on CodePen.
甚至是动画 Nyan Cat:
See the Pen Moving Nyan Cat by Envato Tuts+ (@tutsplus) on CodePen.
希望您喜欢这个动画雪教程,它让您感觉美好而喜庆!
- 去除雪花
发表评论
看着挺好用