HTML5实现晶莹剔透的雨滴特效


Posted in HTML / CSS onMay 14, 2014

复制代码
代码如下:

<html>
<head>
<title>HTML5雨滴特效</title>
<style media="screen" type="text/css">
img { display: none; }
body { overflow: hidden; }
#canvas { position: absolute; top: 0px; left: 0px; }
</style>
<script src="/jscss/demoimg/201401/rainyday.js" type="text/javascript"></script>
<script type="text/javascript">
function demo() {
var engine = new RainyDay('canvas','demo1', window.innerWidth, window.innerHeight);
engine.gravity = engine.GRAVITY_NON_LINEAR;
engine.trail = engine.TRAIL_DROPS;
engine.rain([
engine.preset(0, 2, 500)
]);
engine.rain([
engine.preset(3, 3, 0.88),
engine.preset(5, 5, 0.9),
engine.preset(6, 2, 1),
], 100);
}
</script>
</head>
<body onload="demo();">
<img id="demo1" src="/jscss/demoimg/201401/8390.jpg" />
<div id="cholder">
<canvas id="canvas"></canvas>
</div>
</body>
</html>
HTML / CSS 相关文章推荐
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 #HTML / CSS
HTML5 embed标签定义和用法详解
May 09 #HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 #HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 #HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 #HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 #HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 #HTML / CSS
You might like
4.与数据库的连接
2006/10/09 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python+opencv实现霍夫变换检测直线
2020/10/23 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
python global和nonlocal用法解析
2020/02/03 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
缓刑人员思想汇报500字
2014/09/12 职场文书
保外就医申请书范文
2015/08/06 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android
解决vue中provide inject的响应式监听
2022/04/19 Vue.js