Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { background: #0c0c0c; } #codepen-link { position: absolute; bottom: 30px; right: 30px; height: 40px; width: 40px; z-index: 10; border-radius: 50%; box-sizing: border-box; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg"); background-position: center center; background-size: cover; opacity: 0.5; -webkit-transition: all 0.25s; transition: all 0.25s; } #codepen-link:hover { opacity: 0.8; box-shadow: 0 0 6px #efefef; }
JavaScript
(function (window, document) { var Vector2 = (function () { function Vector2(x, y) { this.x = x || 0; this.y = y || 0; } return Vector2; })(); Vector2.prototype.add = function (addend) { this.x += addend.x; this.y += addend.y; }; var RainDrop = (function () { function RainDrop(parent) { this.size = 2; this.parent = parent; this.init(); } return RainDrop; })(); RainDrop.prototype.init = function () { this.life = 0; this.ttl = Math.random() * 500 + 300; this.position = new Vector2(Math.random() * window.innerWidth, 0); this.velocity = new Vector2( 0.5 - Math.random() * 1, Math.random() * 1 + 0.2 ); this.terminalVelocity = 8; }; RainDrop.prototype.update = function () { if ( this.position.x > window.innerWidth || this.position.x < -this.size || this.life > this.ttl ) this.init(); if (this.position.y > this.parent.floor) { this.position.y = this.parent.floor - this.size; this.velocity.y *= -0.2 - Math.random() * 0.2; } this.life++; this.position.add(this.velocity); this.velocity.y += 0.1; }; var Rain = (function () { function Rain(args) { this.props = args; this.rainDrops = []; this.init(); } return Rain; })(); Rain.prototype.init = function () { this.createCanvas(); this.resize(); this.loop(); }; Rain.prototype.resize = function () { var attr = "position: absolute; z-index: 0; top: 0; left: 0; height: 100vh; width: 100vw;"; this.canvas.setAttribute("style", attr); this.dimensions = { width: window.innerWidth, height: window.innerHeight }; this.canvas.width = this.dimensions.width; this.canvas.height = this.dimensions.height; this.floor = this.dimensions.height * 0.7; }; Rain.prototype.createCanvas = function () { this.canvas = document.createElement("canvas"); this.ctx = this.canvas.getContext("2d"); document.body.appendChild(this.canvas); }; Rain.prototype.draw = function () { this.ctx.fillStyle = this.props.backgroundColor; this.ctx.fillRect(0, 0, this.dimensions.width, this.floor); for (var i = 0, len = this.rainDrops.length; i < len; i++) { var rainDrop = this.rainDrops[i]; rainDrop.update(); this.ctx.fillStyle = this.props.rainColor; this.ctx.fillRect( rainDrop.position.x, rainDrop.position.y, rainDrop.size, rainDrop.size ); } this.reflect(); }; Rain.prototype.reflect = function () { var grad = this.ctx.createLinearGradient( this.dimensions.width / 2, this.floor * 0.6, this.dimensions.width / 2, this.floor ); grad.addColorStop(0, "rgba(20,30,40,1)"); grad.addColorStop(1, "rgba(20,30,40,0)"); this.ctx.save(); this.ctx.scale(1, -1); this.ctx.translate(0, this.floor * -2); this.ctx.filter = "blur(2px) saturate(150%)"; this.ctx.drawImage( this.canvas, 0, 0, this.dimensions.width, this.floor, 0, 0, this.dimensions.width, this.floor ); this.ctx.fillStyle = grad; this.ctx.fillRect(0, 0, this.dimensions.width, this.floor); this.ctx.restore(); }; Rain.prototype.loop = function () { var timeout, self = this; if (self.rainDrops.length < self.props.rainDropCount) { timeout = window.setTimeout(function () { self.rainDrops.push(new RainDrop(self)); }, Math.random() * 200); } else if (timeout) { timeout = null; window.clearTimeout(timeout); } self.draw(); window.requestAnimationFrame(self.loop.bind(self)); }; window.onload = function () { var args = { rainDropCount: 500, rainColor: "rgba(150,180,255,0.8)", backgroundColor: "rgba(10,10,10,0.5)" }; var rain = new Rain(args); window.onresize = function () { rain.resize(); }; }; window.requestAnimationFrame = (function () { return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); } ); })(); })(this, document);
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Canvas下雨-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号