loveamazing 爱心文字掉落炫酷黑客效果 (2).zip

2402_88100054ZIPloveamazing 爱心文字掉落炫酷黑客效果 (2).zip  17.52KB

资源文件列表:

ZIP loveamazing 爱心文字掉落炫酷黑客效果 (2).zip 大约有2个文件
  1. loveamazing 爱心文字掉落炫酷黑客效果/index.docx 14.47KB
  2. loveamazing 爱心文字掉落炫酷黑客效果/loveamazing 爱心文字掉落炫酷黑客效果.html 14.08KB

资源介绍:

loveamazing 爱心文字掉落炫酷黑客效果 (2).zip
<link href="/image.php?url=https://csdnimg.cn/release/download_crawler_static/css/base.min.css" rel="stylesheet"/><link href="/image.php?url=https://csdnimg.cn/release/download_crawler_static/css/fancy.min.css" rel="stylesheet"/><link href="/image.php?url=https://csdnimg.cn/release/download_crawler_static/89892455/raw.css" rel="stylesheet"/><div id="sidebar" style="display: none"><div id="outline"></div></div><div class="pf w0 h0" data-page-no="1" id="pf1"><div class="pc pc1 w0 h0"><img alt="" class="bi x0 y0 w1 h1" src="/image.php?url=https://csdnimg.cn/release/download_crawler_static/89892455/bg1.jpg"/><div class="t m0 x1 h2 y1 ff1 fs0 fc0 sc0 ls0 ws0">&lt;!DOCTYPE html&gt;</div><div class="t m0 x1 h2 y2 ff1 fs0 fc0 sc0 ls0 ws0">&lt;html&gt;</div><div class="t m0 x1 h2 y3 ff1 fs0 fc0 sc0 ls0 ws0">&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;</div><div class="t m0 x1 h2 y4 ff1 fs0 fc0 sc0 ls0 ws0">&lt;head&gt;</div><div class="t m0 x1 h2 y5 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;title&gt;I love you&lt;/title&gt;</div><div class="t m0 x1 h2 y6 ff1 fs0 fc0 sc0 ls0 ws0">&lt;/head&gt;</div><div class="t m0 x1 h2 y7 ff1 fs0 fc0 sc0 ls0 ws0">&lt;body&gt; &lt;canvas id="canvas"&gt;&lt;/canvas&gt;</div><div class="t m0 x1 h2 y8 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;style type="text/css"&gt;</div><div class="t m0 x1 h2 y9 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>body {</div><div class="t m0 x1 h2 ya ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>margin: 0;</div><div class="t m0 x1 h2 yb ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>padding: 0;</div><div class="t m0 x1 h2 yc ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>overflow: hidden;</div><div class="t m0 x1 h2 yd ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>}</div><div class="t m0 x1 h2 ye ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;/style&gt;</div><div class="t m0 x1 h2 yf ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;script type="text/javascript"&gt;</div><div class="t m0 x1 h2 y10 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>var canvas = document.getElementById('canvas');</div><div class="t m0 x1 h2 y11 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>var ctx = canvas.getContext('2d');</div><div class="t m0 x1 h2 y12 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>canvas.height = window.innerHeight;</div><div class="t m0 x1 h2 y13 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>canvas.width = window.innerWidth;</div><div class="t m0 x1 h2 y14 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>var texts = 'I LOVE U'.split('');</div><div class="t m0 x1 h2 y15 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>var fontSize = 16;</div><div class="t m0 x1 h2 y16 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>var columns = canvas.width / fontSize;</div><div class="t m0 x1 h3 y17 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>// <span class="_ _3"> </span><span class="ff2">用于计算输出文字时坐标，所以长度即为列数</span></div><div class="t m0 x1 h2 y18 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>var drops = [];</div><div class="t m0 x1 h3 y19 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>//<span class="ff2">初始值</span></div><div class="t m0 x1 h2 y1a ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>for (var x = 0; x &lt; columns; x++) {</div><div class="t m0 x1 h2 y1b ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>drops[x] = 1;</div><div class="t m0 x1 h2 y1c ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>}</div><div class="t m0 x1 h2 y1d ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>function draw() {</div><div class="t m0 x1 h3 y1e ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>//<span class="ff2">让背景逐渐由透明到不透明</span></div><div class="t m0 x1 h2 y1f ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';</div><div class="t m0 x1 h2 y20 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>ctx.fillRect(0, 0, canvas.width, canvas.height);</div><div class="t m0 x1 h3 y21 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>//<span class="ff2">文字颜色</span></div><div class="t m0 x1 h2 y22 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>ctx.fillStyle = '#f584b7';</div><div class="t m0 x1 h2 y23 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>ctx.font = fontSize + 'px arial';</div><div class="t m0 x1 h3 y24 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>//<span class="ff2">逐行输出文字</span></div><div class="t m0 x1 h2 y25 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>for (var i = 0; i &lt; drops.length; i++) {</div></div><div class="pi" data-data='{"ctm":[1.611830,0.000000,0.000000,1.611830,0.000000,0.000000]}'></div></div><div id="pf2" class="pf w0 h0" data-page-no="2"><div class="pc pc2 w0 h0"><img class="bi x0 y0 w1 h1" alt="" src="/image.php?url=https://csdnimg.cn/release/download_crawler_static/89892455/bg2.jpg"><div class="t m0 x1 h2 y1 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _4"> </span>var text = texts[Math.floor(Math.random() * texts.length)];</div><div class="t m0 x1 h2 y2 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _4"> </span>ctx.fillText(text, i * fontSize, drops[i] * fontSize);</div><div class="t m0 x1 h2 y26 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _4"> </span>if (drops[i] * fontSize &gt; canvas.height || Math.random() &gt; 0.95) {</div><div class="t m0 x1 h2 y4 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _5"> </span>drops[i] = 0;</div><div class="t m0 x1 h2 y5 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _4"> </span>}</div><div class="t m0 x1 h2 y27 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _4"> </span>drops[i]++;</div><div class="t m0 x1 h2 y7 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>}</div><div class="t m0 x1 h2 y8 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>}</div><div class="t m0 x1 h2 y9 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>setInterval(draw, 33);</div><div class="t m0 x1 h2 ya ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;/script&gt;</div><div class="t m0 x1 h2 yb ff1 fs0 fc0 sc0 ls0 ws0">&lt;/body&gt;</div><div class="t m0 x1 h2 yd ff1 fs0 fc0 sc0 ls0 ws0">&lt;/html&gt;</div><div class="t m0 x1 h2 ye ff1 fs0 fc0 sc0 ls0 ws0">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;</div><div class="t m0 x1 h2 yf ff1 fs0 fc0 sc0 ls0 ws0">&lt;HTML&gt;</div><div class="t m0 x1 h2 y11 ff1 fs0 fc0 sc0 ls0 ws0">&lt;HEAD&gt;</div><div class="t m0 x1 h2 y28 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;TITLE&gt; love&lt;/TITLE&gt;</div><div class="t m0 x1 h2 y29 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;</div><div class="t m0 x1 h2 y12 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;META NAME="Generator" CONTENT="EditPlus"&gt;</div><div class="t m0 x1 h2 y13 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;META NAME="Author" CONTENT=""&gt;</div><div class="t m0 x1 h2 y2a ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;META NAME="Keywords" CONTENT=""&gt;</div><div class="t m0 x1 h2 y14 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;META NAME="Description" CONTENT=""&gt;</div><div class="t m0 x1 h2 y2b ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;meta charset="UTF-8"&gt;</div><div class="t m0 x1 h2 y15 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;style&gt;</div><div class="t m0 x1 h2 y16 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>html,</div><div class="t m0 x1 h2 y2c ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>body {</div><div class="t m0 x1 h2 y18 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>height: 100%;</div><div class="t m0 x1 h2 y2d ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>padding: 0;</div><div class="t m0 x1 h2 y1a ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>margin: 0;</div><div class="t m0 x1 h2 y1b ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>background: rgb(0, 0, 0);</div><div class="t m0 x1 h2 y1c ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>}</div><div class="t m0 x1 h2 y1d ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>canvas {</div><div class="t m0 x1 h2 y2e ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>position: absolute;</div><div class="t m0 x1 h2 y1f ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>width: 100%;</div><div class="t m0 x1 h2 y20 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>height: 100%;</div><div class="t m0 x1 h2 y2f ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>}</div><div class="t m0 x1 h2 y23 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>#child {</div><div class="t m0 x1 h2 y30 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>position: fixed;</div><div class="t m0 x1 h2 y25 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>top: 50%;</div></div><div class="pi" data-data='{"ctm":[1.611830,0.000000,0.000000,1.611830,0.000000,0.000000]}'></div></div><div id="pf3" class="pf w0 h0" data-page-no="3"><div class="pc pc3 w0 h0"><img class="bi x0 y0 w1 h1" alt="" src="/image.php?url=https://csdnimg.cn/release/download_crawler_static/89892455/bg3.jpg"><div class="t m0 x1 h2 y1 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>left: 50%;</div><div class="t m0 x1 h2 y2 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>margin-top: -75px;</div><div class="t m0 x1 h2 y3 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>margin-left: -100px;</div><div class="t m0 x1 h2 y4 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>}</div><div class="t m0 x1 h2 y6 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>h4 {</div><div class="t m0 x1 h2 y27 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>font-family: "STKaiti";</div><div class="t m0 x1 h2 y7 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>font-size: 40px;</div><div class="t m0 x1 h2 y8 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>color: #f584b7;</div><div class="t m0 x1 h2 y9 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>position: relative;</div><div class="t m0 x1 h2 ya ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>top: -70px;</div><div class="t m0 x1 h2 yb ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>left: -65px;</div><div class="t m0 x1 h2 yc ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>}</div><div class="t m0 x1 h2 yd ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;/style&gt;</div><div class="t m0 x1 h2 ye ff1 fs0 fc0 sc0 ls0 ws0">&lt;/head&gt;</div><div class="t m0 x1 h2 y10 ff1 fs0 fc0 sc0 ls0 ws0">&lt;body&gt;</div><div class="t m0 x1 h2 y11 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;div id="child"&gt;</div><div class="t m0 x1 h3 y31 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>&lt;h4&gt;<span class="ff3">&#128151;<span class="ff2">&#25105;&#27704;&#36828;&#20026;&#20320;&#30528;&#36855;</span></span>&lt;/h4&gt;</div><div class="t m0 x1 h2 y29 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;/div&gt;</div><div class="t m0 x1 h3 y32 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;!--<span class="ff2">&#36825;&#37324;&#20889;&#21517;&#23383;<span class="ff3">&#10084;</span>&#65281;<span class="_ _6"></span>&#65281;<span class="_ _6"></span>&#65281;<span class="ff1">--&gt;</span></span></div><div class="t m0 x1 h2 y13 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;canvas id="pinkboard"&gt;&lt;/canvas&gt;</div><div class="t m0 x1 h2 y2a ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;!-- &lt;canvas id= "canvas"&gt;&lt;/canvas&gt; <span class="_ _7"> </span>--&gt;</div><div class="t m0 x1 h2 y14 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span>&lt;script&gt;</div><div class="t m0 x1 h2 y2b ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>/*</div><div class="t m0 x1 h2 y15 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _8"> </span>* Settings</div><div class="t m0 x1 h2 y16 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _8"> </span>*/</div><div class="t m0 x1 h2 y2c ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>var settings = {</div><div class="t m0 x1 h2 y18 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>particles: {</div><div class="t m0 x1 h2 y2d ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _4"> </span>length: 500, // maximum amount of particles</div><div class="t m0 x1 h2 y1a ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _4"> </span>duration: 2, // particle duration in sec</div><div class="t m0 x1 h2 y1b ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _4"> </span>velocity: 100, // particle velocity in pixels/sec</div><div class="t m0 x1 h2 y1c ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _4"> </span>effect: -0.75, // play with this for a nice effect</div><div class="t m0 x1 h2 y33 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _4"> </span>size: 30, // particle size in pixels</div><div class="t m0 x1 h2 y1d ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"> </span>},</div><div class="t m0 x1 h2 y2e ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>};</div><div class="t m0 x1 h2 y20 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>/*</div><div class="t m0 x1 h2 y2f ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _9"> </span>* RequestAnimationFrame polyfill by Erik M&#246;ller</div><div class="t m0 x1 h2 y22 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _9"> </span>*/</div><div class="t m0 x1 h2 y23 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span>(function <span class="_ _a"></span>() <span class="_ _a"></span>{ <span class="_ _a"></span>var <span class="_ _a"></span>b <span class="_ _a"></span>= <span class="_ _a"></span>0; <span class="_ _a"></span>var <span class="_ _a"></span>c <span class="_ _a"></span>= <span class="_ _a"></span>["ms", <span class="_ _b"></span>"moz", <span class="_ _b"></span>"webkit", <span class="_ _a"></span>"o"]; <span class="_ _a"></span>for <span class="_ _a"></span>(var <span class="_ _a"></span>a <span class="_ _a"></span>= <span class="_ _a"></span>0; <span class="_ _a"></span>a <span class="_ _a"></span>&lt; <span class="_ _a"></span>c.length </div><div class="t m0 x1 h2 y34 ff1 fs0 fc0 sc0 ls0 ws0">&amp;&amp; <span class="_ _c"> </span>!window.requestAnimationFrame; <span class="_ _c"> </span>++a) <span class="_ _c"> </span>{ <span class="_ _c"> </span>window.requestAnimationFrame <span class="_ _c"> </span>= <span class="_ _c"> </span>window[c[a] <span class="_ _c"> </span>+ </div><div class="t m0 x1 h2 y35 ff1 fs0 fc0 sc0 ls0 ws0">"RequestAnimationFrame"]; <span class="_ _d"> </span>window.cancelAnimationFrame <span class="_ _d"> </span>= <span class="_ _d"> </span>window[c[a] <span class="_ _d"> </span>+ </div></div><div class="pi" data-data='{"ctm":[1.611830,0.000000,0.000000,1.611830,0.000000,0.000000]}'></div></div>
100+评论
captcha
    相关资源