微学网

热门关键词:   as  thinkphp  ecshop  xxx  商务通  www.ymwears.cn
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

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

发布时间:2017-05-13 来源:未知 点击:
点评:雨滴特效想必大家都有见到过吧,而本文所要介绍的这个特效是借助HTML5实现的,晶莹剔透,感兴趣的朋友可以尝试运行下
代码如下: nhxHTML5中文学习网 - HTML5先行者学习网
<html> nhxHTML5中文学习网 - HTML5先行者学习网
<head> nhxHTML5中文学习网 - HTML5先行者学习网
<title>HTML5雨滴特效</title> nhxHTML5中文学习网 - HTML5先行者学习网
<style media="screen" type="text/css"> nhxHTML5中文学习网 - HTML5先行者学习网
img { display: none; } nhxHTML5中文学习网 - HTML5先行者学习网
body { overflow: hidden; } nhxHTML5中文学习网 - HTML5先行者学习网
#canvas { position: absolute; top: 0px; left: 0px; } nhxHTML5中文学习网 - HTML5先行者学习网
</style> nhxHTML5中文学习网 - HTML5先行者学习网
<script src="/jscss/demoimg/201401/rainyday.js" type="text/javascript"></script> nhxHTML5中文学习网 - HTML5先行者学习网
<script type="text/javascript"> nhxHTML5中文学习网 - HTML5先行者学习网
function demo() { nhxHTML5中文学习网 - HTML5先行者学习网
var engine = new RainyDay('canvas','demo1', window.innerWidth, window.innerHeight); nhxHTML5中文学习网 - HTML5先行者学习网
engine.gravity = engine.GRAVITY_NON_LINEAR; nhxHTML5中文学习网 - HTML5先行者学习网
engine.trail = engine.TRAIL_DROPS; nhxHTML5中文学习网 - HTML5先行者学习网
engine.rain([ nhxHTML5中文学习网 - HTML5先行者学习网
engine.preset(0, 2, 500) nhxHTML5中文学习网 - HTML5先行者学习网
]); nhxHTML5中文学习网 - HTML5先行者学习网
engine.rain([ nhxHTML5中文学习网 - HTML5先行者学习网
engine.preset(3, 3, 0.88), nhxHTML5中文学习网 - HTML5先行者学习网
engine.preset(5, 5, 0.9), nhxHTML5中文学习网 - HTML5先行者学习网
engine.preset(6, 2, 1), nhxHTML5中文学习网 - HTML5先行者学习网
], 100); nhxHTML5中文学习网 - HTML5先行者学习网
} nhxHTML5中文学习网 - HTML5先行者学习网
</script> nhxHTML5中文学习网 - HTML5先行者学习网
</head> nhxHTML5中文学习网 - HTML5先行者学习网
<body onload="demo();"> nhxHTML5中文学习网 - HTML5先行者学习网
<img id="demo1" src="/jscss/demoimg/201401/8390.jpg" /> nhxHTML5中文学习网 - HTML5先行者学习网
<div id="cholder"> nhxHTML5中文学习网 - HTML5先行者学习网
<canvas id="canvas"></canvas> nhxHTML5中文学习网 - HTML5先行者学习网
</div> nhxHTML5中文学习网 - HTML5先行者学习网
</body> nhxHTML5中文学习网 - HTML5先行者学习网
</html> nhxHTML5中文学习网 - HTML5先行者学习网
nhxHTML5中文学习网 - HTML5先行者学习网

这就是微学网-程序员之家为你提供的"HTML5实现晶莹剔透的雨滴特效"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/6764.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 | 学习教程 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2021 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

菜鸟学习网,提供各类程序编程入门,技巧