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

最新推荐文章于 2024-04-12 05:23:09 发布

一只小小的蚂蚁

最新推荐文章于 2024-04-12 05:23:09 发布

阅读量2.4k

点赞数 3

分类专栏： JAVA Web 文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_44863179/article/details/104209181

版权

JAVA Web 专栏收录该内容

34 篇文章 3 订阅

订阅专栏

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

在这里插入图片描述
一、样式设置
利用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>

一只小小的蚂蚁

关注

3
点赞
踩
37

收藏

觉得还不错? 一键收藏
1
评论
网页制作动态落雪效果（web应用）

制作的内容是：将一张照片设置网页的背景，并且在背景图上制作出落雪的效果，所实现的效果是雪花由上向下落下的动态页面，如下图所展示的：一、样式设置利用css选择器设置风格样式：<style> #m{ width: 1220px; height:666px; background: url("image/...
复制链接

扫一扫