Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
PLASM.it - 2018
STARDUST
A N O T H E R
C O D E P E N
css
@import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600"); body { padding: 0; margin: 0; } .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: #FFF; font-weight: 100; font-size: 90px; padding: 0; margin: 0; line-height: 1; text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d; } .title h1 span { font-weight: 600; padding: 0; margin: 0; color: #FFFFFF; } .title h3 { font-weight: 200; font-size: 20px; padding: 0; margin: 0; line-height: 1; color: #FFFFFF; letter-spacing: 2px; }
JavaScript
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var particles = []; var microparticles = []; var c1 = createCanvas({ width: $(window).width(), height: $(window).height() }); var tela = c1.canvas; var canvas = c1.context; // $("body").append(tela); $("body").append(c1.canvas); var Particle = function () { function Particle(canvas) { _classCallCheck(this, Particle); this.random = Math.random(); this.random1 = Math.random(); this.random2 = Math.random(); this.progress = 0; this.canvas = canvas; this.life = 1000 + Math.random() * 3000; this.x = $(window).width() / 2 + (Math.random() * 20 - Math.random() * 20); this.y = $(window).height(); this.s = 2 + Math.random(); this.w = $(window).width(); this.h = $(window).height(); this.direction = this.random > .5 ? -1 : 1; this.radius = 1 + 3 * this.random; this.color = "#ff417d"; this.ID = setInterval(function () { microparticles.push(new microParticle(c1.context, { x: this.x, y: this.y })); }.bind(this), this.random * 20); setTimeout(function () { clearInterval(this.ID); }.bind(this), this.life); } _createClass(Particle, [{ key: "render", value: function render() { this.canvas.beginPath(); this.canvas.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); // this.canvas.lineWidth = 2; this.canvas.shadowOffsetX = 0; this.canvas.shadowOffsetY = 0; // this.canvas.shadowBlur = 6; this.canvas.shadowColor = "#000000"; this.canvas.fillStyle = this.color; this.canvas.fill(); this.canvas.closePath(); } }, { key: "move", value: function move() { this.x -= this.direction * Math.sin(this.progress / (this.random1 * 430)) * this.s; this.y -= Math.cos(this.progress / this.h) * this.s; if (this.x < 0 || this.x > this.w - this.radius) { clearInterval(this.ID); return false; } if (this.y < 0) { clearInterval(this.ID); return false; } this.render(); this.progress++; return true; } }]); return Particle; }(); var microParticle = function () { function microParticle(canvas, options) { _classCallCheck(this, microParticle); this.random = Math.random(); this.random1 = Math.random(); this.random2 = Math.random(); this.progress = 0; this.canvas = canvas; this.x = options.x; this.y = options.y; this.s = 2 + Math.random() * 3; this.w = $(window).width(); this.h = $(window).height(); this.radius = 1 + this.random * 0.5; this.color = "#4EFCFE"; //this.random > .5 ? "#a9722c" : "#FFFED7" } _createClass(microParticle, [{ key: "render", value: 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(); } }, { key: "move", value: function move() { this.x -= Math.sin(this.progress / (100 / (this.random1 - this.random2 * 10))) * this.s; this.y += Math.cos(this.progress / this.h) * this.s; if (this.x < 0 || this.x > this.w - this.radius) { return false; } if (this.y > this.h) { return false; } this.render(); this.progress++; return true; } }]); return microParticle; }(); var random_life = 1000; setInterval(function () { particles.push(new Particle(canvas)); random_life = 2000 * Math.random(); }.bind(this), random_life); function clear() { var grd = canvas.createRadialGradient(tela.width / 2, tela.height / 2, 0, tela.width / 2, tela.height / 2, tela.width); grd.addColorStop(0, "rgba(82,42,114,1)"); grd.addColorStop(1, "rgba(26,14,4,0)"); // Fill with gradient canvas.globalAlpha = 0.16; canvas.fillStyle = grd; canvas.fillRect(0, 0, tela.width, tela.height); } function blur(ctx, canvas, amt) { // ctx.filter = `blur(${amt}px)` // ctx.drawImage(canvas, 0, 0) // ctx.filter = 'none' } function update() { clear(); particles = particles.filter(function (p) { return p.move(); }); microparticles = microparticles.filter(function (mp) { return mp.move(); }); requestAnimationFrame(update.bind(this)); } function createCanvas(properties) { var canvas = document.createElement('canvas'); canvas.width = properties.width; canvas.height = properties.height; var context = canvas.getContext('2d'); return { canvas: canvas, context: context }; } 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号