2025年网页制作动态落雪效果（web应用）

科技前沿 • 2025-02-18 22:46 • 阅读 51

大家好，我是讯享网，很高兴认识大家。

制作的内容是：将一张照片设置网页的背景，并且在背景图上制作出落雪的效果，所实现的效果是雪花由上向下落下的动态页面，如下图所展示的：

在这里插入图片描述
讯享网
一、样式设置
利用css选择器设置风格样式：

<style> #m{ 
    width: 1220px; height:666px; background: url("image/bg.jpg"); margin: auto; position: relative; overflow: hidden; } #m div{ 
    color: #ffff; font-size: 10px; filter: blur(2px); position: absolute; } </style>

讯享网

二、创建雪花函数

讯享网function snowDown() { 
    //创建雪花 var snow = document.createElement('div'); var txt = document.createTextNode('.'); snow.appendChild(txt); m.appendChild(snow); //将雪花放在合适的位置 //将雪花散布在横向的位置 var y = -50; var z = Math.random() * 1000; snow.style.left = Math.random() * 1000 + "px"; //雪花的垂直位置 snow.style.top = y + "px"; //雪花的大小标记计算 snow.style.fontSize = Math.abs(z * 0.07 - 70) + 10 + "px"; //清晰度的标记计算 snow.style.opacity = Math.abs(z * 0.0006 - 0.6) + 0.2; }

三、雪花下落函数
注意：下边这条语句是是用来标记雪花下落速度的，可以根据自己的需求，y值越大下落越快，反之越慢。

 y +=Math.abs( z/1000-1)+0.5;

讯享网 down(); function down() { 
    //每隔13毫秒执行本身down()函数 if(y>666) { 
    snow.remove(); } else { 
    //数值计算，标记雪花下落速度不同 y +=Math.abs( z/1000-1)+0.5; snow.style.top =y+"px"; setTimeout(down,13); } setTimeout(down,13); }

四、整体代码
注意：对于所插入的照片可以设置一个包，专门来放照片如下：
在这里插入图片描述

 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <style> #m{ 
    width: 1220px; height:666px; background: url("image/bg.jpg"); margin: auto; position: relative; overflow: hidden; } #m div{ 
    color: #ffff; font-size: 10px; filter: blur(2px); position: absolute; } </style> </head> <body> <div id="m"> <script> var m=document.getElementById("m"); //每200毫秒执行一次下边的函数 setInterval(snowDown,500); //一个雪花从出生到死亡的全过程 function snowDown() { 
    //创建雪花 var snow = document.createElement('div'); var txt = document.createTextNode('.'); snow.appendChild(txt); m.appendChild(snow); //将雪花放在合适的位置 //将雪花散布在横向的位置 var y = -50; var z = Math.random() * 1000; snow.style.left = Math.random() * 1000 + "px"; //雪花的垂直位置 snow.style.top = y + "px"; //雪花的大小标记计算 snow.style.fontSize = Math.abs(z * 0.07 - 70) + 10 + "px"; //清晰度的标记计算 snow.style.opacity = Math.abs(z * 0.0006 - 0.6) + 0.2; } //雪花下落 down(); function down() { 
    //每隔13毫秒执行本身down()函数 if(y>666) { 
    snow.remove(); } else { 
    //数值计算，标记雪花下落速度不同 y +=Math.abs( z/1000-1)+0.5; snow.style.top =y+"px"; setTimeout(down,13); } setTimeout(down,13); } </script> </div> </body> </html>

2025年网页制作动态落雪效果（web应用）

制作的内容是：将一张照片设置网页的背景，并且在背景图上制作出落雪的效果，所实现的效果是雪花由上向下落下的动态页面，如下图所展示的：

相关推荐