Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
PLASM.it - 2017
BLOOD
Deviation of microcosm
css
@import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600"); .more-pens { position: fixed; left: 20px; bottom: 20px; z-index: 10; font-family: "Montserrat"; font-size: 12px; } a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active { font-family: "Montserrat"; font-size: 12px; text-decoration: none; background: #212121; padding: 4px 8px; color: #f7f7f7; } a.white-mode:hover, a.white-mode:link:hover, a.white-mode:visited:hover, a.white-mode:active:hover { background: #edf3f8; color: #212121; } body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; background: #000000; } .title { z-index: 10; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); font-family: "Montserrat"; text-align: center; width: 100%; } .title h1 { position: relative; color: #EEEEEE; font-weight: 600; font-size: 60px; padding: 0; margin: 0; line-height: 1; text-shadow: 0 0 30px #000155; } .title h1 span { font-weight: 600; padding: 0; margin: 0; color: #BBB; } .title h3 { font-weight: 200; font-size: 20px; padding: 0; margin: 0; line-height: 1; color: #EEEEEE; letter-spacing: 2px; text-shadow: 0 0 30px #000155; }
JavaScript
'use strict'; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var max_particles = 1000; var tela = document.createElement('canvas'); tela.width = $(window).width(); tela.height = $(window).height(); $("body").append(tela); var canvas = tela.getContext('2d'); var Particle = function () { function Particle(canvas, progress) { _classCallCheck(this, Particle); var random = Math.random(); this.progress = 0; this.canvas = canvas; this.x = $(window).width() / 2 + (Math.random() * 200 - Math.random() * 200); this.y = $(window).height() / 2 + (Math.random() * 200 - Math.random() * 200); this.w = $(window).width(); this.h = $(window).height(); this.radius = random > .2 ? Math.random() * 1 : Math.random() * 3; this.color = random > .2 ? "#d8002c" : "#F9314C"; this.radius = random > .8 ? Math.random() * 2 : this.radius; this.color = random > .8 ? "#7DFFF2" : this.color; // this.color = random > .1 ? "#ffae00" : "#f0ff00" // Alien this.variantx1 = Math.random() * 300; this.variantx2 = Math.random() * 400; this.varianty1 = Math.random() * 100; this.varianty2 = Math.random() * 120; } Particle.prototype.render = function render() { this.canvas.beginPath(); this.canvas.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); this.canvas.lineWidth = 2; this.canvas.fillStyle = this.color; this.canvas.fill(); this.canvas.closePath(); }; Particle.prototype.move = function move() { // this.x += (Math.sin(this.progress/this.variantx1)*Math.cos(this.progress/this.variantx2)); // this.y += (Math.sin(this.progress/this.varianty1)*Math.cos(this.progress/this.varianty2)); this.x += Math.sin(this.progress / this.variantx1) * Math.cos(this.progress / this.variantx2); this.y += Math.cos(this.progress / this.varianty2); if (this.x < 0 || this.x > this.w - this.radius) { return false; } if (this.y < 0 || this.y > this.h - this.radius) { return false; } this.render(); this.progress++; return true; }; return Particle; }(); var particles = []; var init_num = popolate(max_particles); function popolate(num) { for (var i = 0; i < num; i++) { setTimeout(function () { particles.push(new Particle(canvas, i)); }.bind(this), i * 20); } return particles.length; } function clear() { canvas.globalAlpha = 0.05; canvas.fillStyle = '#000'; canvas.fillRect(0, 0, tela.width, tela.height); canvas.globalAlpha = 1; } function update() { particles = particles.filter(function (p) { return p.move(); }); if (particles.length < init_num) { popolate(1); } clear(); requestAnimationFrame(update.bind(this)); } update();
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>粒子偏差动画-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号