jquery实现全屏canvas粒子流背景文字发光显示效果代码
代码语言:html
所属分类:背景
代码描述:jquery实现全屏canvas粒子流背景文字发光显示效果代码
代码标签: jquery 全屏 canvas 粒子流 背景 文字 发光 显示
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <style> 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; } </style> </head> <body> <div class="title"> <h3>PLASM.it - 2022</h3> <h1>STARDUST</h1> <h3>A N O T H E R <strong>CODEBFWWIKI</strong></h3> </div> <script> 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 () { cle.........完整代码请登录后点击上方下载按钮下载查看
网友评论0