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 相关文章推荐
利用CSS3实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
巧用CSS3 border实现图片遮罩效果代码
Apr 09 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 HTML / CSS
table不让td文字溢出操作方法
Dec 24 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
使用PHP的日期与时间函数技巧
2008/04/24 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
python缩进区别分析
2014/02/15 Python
python实现线程池的方法
2015/06/30 Python
使用python实现省市三级菜单效果
2016/01/20 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
用Python 执行cmd命令
2020/12/18 Python
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
妇联主席先进事迹
2014/05/18 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
2015教师年度考核评语
2015/03/25 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
丧事答谢词大全
2015/09/30 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python