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

2402_88100054

资源文件列表:

loveamazing 爱心文字掉落炫酷黑客效果 (2).zip 大约有2个文件

loveamazing 爱心文字掉落炫酷黑客效果/index.docx 14.47KB
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"><!DOCTYPE html></div><div class="t m0 x1 h2 y2 ff1 fs0 fc0 sc0 ls0 ws0"><html></div><div class="t m0 x1 h2 y3 ff1 fs0 fc0 sc0 ls0 ws0"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></div><div class="t m0 x1 h2 y4 ff1 fs0 fc0 sc0 ls0 ws0"><head></div><div class="t m0 x1 h2 y5 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span><title>I love you</title></div><div class="t m0 x1 h2 y6 ff1 fs0 fc0 sc0 ls0 ws0"></head></div><div class="t m0 x1 h2 y7 ff1 fs0 fc0 sc0 ls0 ws0"><body> <canvas id="canvas"></canvas></div><div class="t m0 x1 h2 y8 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span><style type="text/css"></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></style></div><div class="t m0 x1 h2 yf ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span><script type="text/javascript"></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 < 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 < 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 > canvas.height || Math.random() > 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></script></div><div class="t m0 x1 h2 yb ff1 fs0 fc0 sc0 ls0 ws0"></body></div><div class="t m0 x1 h2 yd ff1 fs0 fc0 sc0 ls0 ws0"></html></div><div class="t m0 x1 h2 ye ff1 fs0 fc0 sc0 ls0 ws0"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"></div><div class="t m0 x1 h2 yf ff1 fs0 fc0 sc0 ls0 ws0"><HTML></div><div class="t m0 x1 h2 y11 ff1 fs0 fc0 sc0 ls0 ws0"><HEAD></div><div class="t m0 x1 h2 y28 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span><TITLE> love</TITLE></div><div class="t m0 x1 h2 y29 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></div><div class="t m0 x1 h2 y12 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span><META NAME="Generator" CONTENT="EditPlus"></div><div class="t m0 x1 h2 y13 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span><META NAME="Author" CONTENT=""></div><div class="t m0 x1 h2 y2a ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span><META NAME="Keywords" CONTENT=""></div><div class="t m0 x1 h2 y14 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span><META NAME="Description" CONTENT=""></div><div class="t m0 x1 h2 y2b ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span><meta charset="UTF-8"></div><div class="t m0 x1 h2 y15 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span><style></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></style></div><div class="t m0 x1 h2 ye ff1 fs0 fc0 sc0 ls0 ws0"></head></div><div class="t m0 x1 h2 y10 ff1 fs0 fc0 sc0 ls0 ws0"><body></div><div class="t m0 x1 h2 y11 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span><div id="child"></div><div class="t m0 x1 h3 y31 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span><h4><span class="ff3">💗<span class="ff2">我永远为你着迷</span></span></h4></div><div class="t m0 x1 h2 y29 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span></div></div><div class="t m0 x1 h3 y32 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span></span></span></div><div class="t m0 x1 h2 y13 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span><canvas id="pinkboard"></canvas></div><div class="t m0 x1 h2 y2a ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span></div><div class="t m0 x1 h2 y14 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _0"> </span><script></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ö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>< <span class="_ _a"></span>c.length </div><div class="t m0 x1 h2 y34 ff1 fs0 fc0 sc0 ls0 ws0">&& <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

类型	标题	大小	时间
	物流管理系统 JAVA毕业设计源码+数据库+论文 Vue.js+SpringBoot+MySQL.zip	21.29MB	6月前

	农商对接系统 JAVA毕业设计源码+数据库+论文 Vue.js+SpringBoot+MySQL.zip	21.31MB	6月前
	精简博客系统 JAVA毕业设计源码+数据库+论文 Vue.js+SpringBoot+MySQL.zip	33.15MB	6月前
	“健康早知道”微信小程序	15.06MB	6月前
	实习管理系统 JAVA毕业设计源码+数据库+论文 Vue.js+SpringBoot+MySQL.zip	30.68MB	6月前

	大学生一体化服务平台 JAVA毕业设计源码+数据库+论文 Vue.js+SpringBoot+MySQL.zip	23.11MB	6月前
	在线考试系统 JAVA毕业设计源码+数据库+论文 Vue.js+SpringBoot+MySQL.zip	27.15MB	6月前
	医疗挂号管理系统 JAVA毕业设计源码+数据库+论文 Vue.js+SpringBoot+MySQL.zip	40.52MB	6月前