HTML 和 JavaScript 实现飘花的效果，也不算花，就是有悬浮物飘下来，和下雪似的。

也是不需要图片和其他的 js 脚本做辅助，其实已经全写在 HTML 文件中了。

<html>

<head>

    <title>飘花效果</title>

</head>

<body>

<canvas id="christmasCanvas"

        style="top: 0px; left: 0px; z-index: 5000; position: fixed; pointer-events: none;"></canvas>

<script>

    var snow = function () {

        var b = document.getElementById("christmasCanvas"), a = b.getContext("2d"), d = window.innerWidth,

            c = window.innerHeight;

        b.width = d;

        b.height = c;

        for (var e = [], b = 0; b < 70; b++) {

            e.push({x: Math.random() * d, y: Math.random() * c, r: Math.random() * 4 + 1, d: Math.random() * 70})

        }

        var h = 0;

        window.intervral4Christmas = setInterval(function () {

            a.clearRect(0, 0, d, c);

            a.fillStyle = "rgba(255, 255, 0, 0.6)";

            a.shadowBlur = 5;

            a.shadowColor = "rgba(255, 255, 255, 0.9)";

            a.beginPath();

            for (var b = 0; b < 70; b++) {

                var f = e[b];

                a.moveTo(f.x, f.y);

                a.arc(f.x, f.y, f.r, 0, Math.PI * 2, !0)

            }

            a.fill();

            h += 0.01;

            for (b = 0; b < 70; b++) {

                if (f = e[b], f.y += Math.cos(h + f.d) + 1 + f.r / 2, f.x += Math.sin(h) * 2, f.x > d + 5 || f.x < -5 || f.y > c) {

                    e[b] = b % 3 > 0 ? {x: Math.random() * d, y: -10, r: f.r, d: f.d} : Math.sin(h) > 0 ? {

                        x: -5,

                        y: Math.random() * c,

                        r: f.r,

                        d: f.d

                    } : {x: d + 5, y: Math.random() * c, r: f.r, d: f.d}

                }

            }

        }, 70)

    }

    snow();

</script>

</body>

</html>

就是下面的效果，有黄色的小圈圈掉下来。能看清吧？

　　　　

HTML 和 JavaScript 实现飘花的效果的更多相关文章

  1. 使用 Canvas 和 JavaScript 创建逼真的下雨效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.这里向大家展示一个使用 Canva ...

  2. JavaScript实现多栏目切换效果

    效果: 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" ...

  3. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  4. javascript 45种缓动效果BY司徒正美

    javascript 45种缓动效果 参数 类型 说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...

  5. DIV+javascript实现首尾相连循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JavaScript 实现 标签页 切换效果

    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...

  7. 使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

    www.gbtags.com 使用javascript开发的视差滚动效果的云彩 阅读全文:使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

  8. 使用javascript开发的视差滚动效果的云彩

    在线演示 jquery.parallax.js是一款能够帮助你快速开发视差效果的jQuery插件,在这里我们使用它来开发一款漂亮的云朵视差效果. 主要代码: Javascript ........ 阅 ...

  9. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

随机推荐

  1. ZOJ 3777 - Problem Arrangement - [状压DP][第11届浙江省赛B题]

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3777 Time Limit: 2 Seconds      Me ...

  2. Thymeleaf模板引擎的初步使用

    在springboot中,推荐使用的模板引擎是Thymeleaf模板引擎,它提供了完美的Spring MVC的支持.下面就简单的介绍一下Thymeleaf模板引擎的使用. 在controller层中, ...

  3. hmm用于speech和image

    隐马尔科夫模型用于speech和image的原因是,因为hmm模型主要是适用于前后特征有关联性(参考骰子案例)的数据,有三种模式, 其中一种模式就是通过数据输出判断来源分类,而speech和image ...

  4. Python requests 301/302/303重定向（跨域/本域）cookie、Location问题

    今天使用request的get方法获取一个网站的登录页信息,结果使用charles抓包的时候发现该网站登录页303(重定向的问题),网上查了很多资料,原因如下: 一.cookie 原因:利用reque ...

  5. 01 - nginx - 安装、配置文件、默认网站、虚拟主机

    一.运维: . 介绍服务器. 服务器逻辑: 服务器选择 操作系统 部署逻辑 业务环境部署逻辑 业务部署图 软件部署文档 日常维护文档 测试 开发上传代码到源码系统 上线 - 测服务器,内测 预发布测试 ...

  6. c字符检测函数

    isalpha(c)    /*判断是否为英文字符*/iscntrl(c)     /*判断是否为控制字符*/ isdigit(c)     /*判断是否为阿拉伯数字0到9*/isgraph(c)   ...

  7. kubernetes实战(十二)：k8s使用helm持久化部署redmine集成openLDAP

    1.基本概念 此次安装的有Jenkins.Gitlab.Redmine,我公司目前使用的是独立于k8s集群之外单独部署的Jenkins等服务,此文章会介绍三种服务基于k8s的部署方式,之后集成之前部署 ...

  8. （3.3）mysql基础深入——mysql启动深入分析

    基础:(2.1)学习笔记之mysql基本操作(启动与关闭) 0.mysql启动的 3种方式 (1)mysql.server (2)mysqld_safe (3)mysqld 1.启动分析 [1.1]概 ...

  9. 如何解决win8系统下卸载软件出现错误代码为2502和2503的问题

    1.首先打开任务管理器,可以通过右键点击桌面上的任务栏打开任务管理器,也可以通过同时按下键盘上的Ctrl+Alt+Delete键打开任务管理器. 2.打开任务管理器后,切换到“详细信息”选项卡,找到e ...

  10. 001-nginx基础配置-location

    一.基础语法 Location block 的基本语法形式是: location [=|~|~*|^~|@] pattern { ... } [=|~|~*|^~|@] 被称作 location mo ...