이 특수 효과를 보려면 HTML5를 지원하는 브라우저를 사용하세요 코드 복사코드는 다음과 같습니다. <제목>HTML5유特color的进titude条<br>body {<br>배경: #111;<br>color:흰색; <br>}<br>a{color:White;}<br>캔버스 {<br>배경: #111;<br>테두리: 1px 솔리드 #171717;<br>디스플레이: 블록;<br>왼쪽: 50 %;<br>여백: -51px 0 0 -201px;<br>위치: 절대;<br>상단: 50%;<br>}<br><본문><br>/*======================== ======================*/<br>/* 라이트 로더<br>/*============== ====================================*/<br>var lightLoader = 함수(c, cw, ch) {<br>var _this = this;<br>this.c = c;<br>this.ctx = c.getContext('2d');<br>this.cw = cw;<br>this. ch = ch;<br>this.loaded = 0;<br>this.loaderSpeed = .6;<br>this.loaderHeight = 10;<br>this.loaderWidth = 310;<br>this.loader = {<br>x: (this.cw / 2) - (this.loaderWidth / 2),<br>y: (this.ch / 2) - (this.loaderHeight / 2)<br>};<br>this. 입자 = [];<br>this.particleLift = 180;<br>this.hueStart = 0<br>this.hueEnd = 120;<br>this.hue = 0;<br>this.gravity = .15; <br>this.particleRate = 4;<br>/*==================================== ====================*/<br>/* 초기화<br>/*================= =======================================*/<br>this.init = 함수( ) {<br>this.loop();<br>};<br>/*============================= ===========================*/<br>/* 유틸리티 기능<br>/*========= ==============================================*/<br>this.rand = function (rMi, rMa) { return ~ ~((Math.random() * (rMa - rMi 1)) rMi); };<br>this.hitTest = 함수 (x1, y1, w1, h1, x2, y2, w2, h2) { return !(x1 w1 _this.particles.splice(i, 1);<br>}<br>};<br>this.Particle.prototype.render = function() {<br>_this.ctx. fillStyle = 'hsla(' this.hue ', 100%, ' _this.rand(50, 70) '%, ' _this.rand(20, 100) / 100 ')';<br>_this.ctx.fillRect( this.x, this.y, this.width, this.height);<br>};<br>this.createParticles = function() {<br>var i = this.particleRate;<br>while(i- -) {<br>this.particles.push(new this.Particle());<br>};<br>};<br>this.updateParticles = function() {<br>var i = this.particles .length;<br>while (i--) {<br>var p = this.particles[i];<br>p.update(i);<br>};<br>};<br>this .renderParticles = 함수 () {<br>var i = this.particles.length;<br>while (i--) {<br>var p = this.particles[i];<br>p.render() ;<br>};<br>};</p> <p>/*========================================== =============*/<br>/* 캔버스 지우기<br>/*======================== ================================*/<br>this.clearCanvas = function() {<br>this. ctx.globalCompositeOperation = 'source-over';<br>this.ctx.clearRect(0, 0, this.cw, this.ch);<br>this.ctx.globalCompositeOperation = 'lighter';<br>};<br>/*======== ================================================*/ <br>/* 애니메이션 루프 <br>/*===================================== ===================*/<br>this.loop = function () {<br>var loopIt = function () {<br>requestAnimationFrame(loopIt, _this. c);<br>_this.clearCanvas();<br>_this.createParticles();<br>_this.updateLoader();<br>_this.updateParticles();<br>_this.renderLoader();<br>_this.renderParticles();<br>};<br>loopIt();<br>};<br>};<br>/*================ ========================================*/<br>/* 캔버스 지원 확인 <br>/*=========================================== ===========*/<br>var isCanvasSupported = function () {<br>var elem = document.createElement('canvas');<br>return !!(elem.getContext && elem .getContext('2d'));<br>};<br>/*============================== =========================*/<br>/* requestAnimationFrame 설정<br>/*=========== ============================================*/<br> var setupRAF = function () {<br>var lastTime = 0;<br>var Vendors = ['ms', 'moz', 'webkit', 'o'];<br>for (var x = 0; x < Vendors.length && !window.requestAnimationFrame; x) {<br />window.requestAnimationFrame = window[vendors[x] 'RequestAnimationFrame'];<br />window.cancelAnimationFrame = window[vendors[x] 'CancelAnimationFrame'] || window[vendors[x] 'CancelRequestAnimationFrame'];<br />};<br />if (!window.requestAnimationFrame) {<br />window.requestAnimationFrame = 함수(콜백, 요소) {<br />var currTime = new Date( ).getTime();<br />var timeToCall = Math.max(0, 16 - (currTime - lastTime));<br />var id = window.setTimeout(function () { callback(currTime timeToCall); }, timeToCall );<br />lastTime = currTime timeToCall;<br />return id;<br />};<br />};<br />if (!window.cancelAnimationFrame) {<br />window.cancelAnimationFrame = 함수(id) {<br />clearTimeout(id);<br />};<br />};<br />};<br />/*======================= =================================*/<br />/* 캔버스 정의 및 초기화<br />/*= ================================================= =====*/<br />if (isCanvasSupported) {<br />var c = document.createElement('canvas');<br />c.width = 400;<br />c.height = 100;<br />var cw = c.width;<br />var ch = c.height;<br />document.body.appendChild(c);<br />var cl = new lightLoader(c, cw, ch);<br />setupRAF ();<br />cl.init();<br />}<br />HTML5进島条请使用支持HTML5的浏览器查看本页< /div>
