HTML 和 JavaScript 实现飘花的效果
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 实现飘花的效果的更多相关文章
- 使用 Canvas 和 JavaScript 创建逼真的下雨效果
HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.这里向大家展示一个使用 Canva ...
- JavaScript实现多栏目切换效果
效果: 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- javascript 45种缓动效果BY司徒正美
javascript 45种缓动效果 参数 类型 说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...
- DIV+javascript实现首尾相连循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript 实现 标签页 切换效果
JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...
- 使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台
www.gbtags.com 使用javascript开发的视差滚动效果的云彩 阅读全文:使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台
- 使用javascript开发的视差滚动效果的云彩
在线演示 jquery.parallax.js是一款能够帮助你快速开发视差效果的jQuery插件,在这里我们使用它来开发一款漂亮的云朵视差效果. 主要代码: Javascript ........ 阅 ...
- HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...
随机推荐
- hadoop命令运行,去除:WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform 警告
参照:Hadoop之—— WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... 修 ...
- FW 构建OpenStack的高可用性(HA,High Availability)
原文地址:http://blog.csdn.net/hilyoo/article/details/7704280 1.CAP理论 1) CAP 理论给出了3个基本要素: 一致性 ( Consisten ...
- 各种小巧的Hello World
在Reddit看到这篇文章:Hello from a libc-free world! ,觉得挺有趣,然后又想起以前看过的各种相关资料,在此做一个整理.注意所有实验环境都为Linux. 版本一: 实际 ...
- FW Windows下DOS命令大全(经典收藏)---mklink
dos command port-->PID: netstat -ano | findstr port | tasklist |findstr "" Windows SYST ...
- django model field validator 设置
转自:http://blog.csdn.net/cwjcwj520/article/details/17330845 例子为想在创建用户名的时候验证输入字符是否有效,并且插入了even_field为C ...
- bin/hdfs namenode -format 格式化失败
确认配置正确前提下,将name目录删除重建,再格式化: hadoop防止将已经存在的集群格式化
- SQL Server 学习博客分享列表(应用式学习 + 深入理解)
SQL Server 学习博客分享列表(应用式学习 + 深入理解) 转自:https://blog.csdn.net/tianjing0805/article/details/75047574 SQL ...
- postman 安装,对elasticsearch进行请求
1 使用postman对elasticsearch进行测试 :下载插件: https://www.getpostman.com/apps ,下载时exe文件,双击自动安装,首次打开注册.下面就可以使 ...
- Chrome Input框老是有输入记录的终极解决方案
尤其是日期框,输入记录都挡住日期弹框了. 浏览器地址栏输入: chrome://settings/autofill,按钮关掉就可以了.
- CentOS7更改Docker默认镜像和容器存储位置
图片出处:https://bobcares.com/wp-content/uploads/docker-change-directory.jpg 一.Why? 通常,当你开始使用docker时,我们并 ...