https://www.iarc.top/tag/HTML/ https://www.iarc.top/452.html 2024-07-07T00:41:00+08:00 一个大气的文章列表CSS渐变动画，也可以使用图片作为渐变背景，，效果如下(鼠标移动到元素上后颜色会更加突出)：日间模式夜间模式接下来需要编辑的文件以及相对Joe主题的文件路径：joe.index.js /Joe/assets/jsjoe.index.css /Joe/assets/cssjoe.mode.css/Joe/assets/css开始（共三部分）{tabs}{tabs-pane label="添加HTML代码"}打开joe.index.js文件找到如图所示位置可以直接搜joe_list__item wow default定位到，其实一打开就是了。在第一个a标签元素后面加入如下代码<div class="article-banner-wrap"></div> <div class="article-banner"></div>{/tabs-pane}{tabs-pane label="添加CSS代码"}直接将下面的css代码复制粘贴到joe.index.css文件的最后面就行了/*首页列表渐变*/ .article-banner-wrap { position: absolute; height: 100%; width: 50%; right: 0; top: 0; } .article-banner { visibility: hidden; opacity: .2; position: absolute; height: 100%; width: 50%; right: 0; top: 0; z-index: 0; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center center; transition: opacity 0.2s; -webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); border-radius: 8px; background:linear-gradient(to left,#2BC0E4,#EAECC6); visibility: visible; animation: banner-show 1s; } .joe_list__item.default:hover .article-banner{opacity: 1;}其中的background可以改成图片地址，这样效果就是图片了，但图片会拖累网站加载速度，可自行决定是否要换成图片。{/tabs-pane}{tabs-pane label="适配夜间模式"}打开joe.mode.css文件，将以下CSS代码加入文件底部即可。/*首页列表图片渐变夜间模式*/ html[data-night='night'] .article-banner{ background: linear-gradient(to left,#1F1C2C,#928DAB); opacity:0.1 }我这里不是最底部是因为我后来又加其他东西了，其实也不是一定要最底部，只是方便小白操作和自己描述了。{/tabs-pane}{/tabs} https://www.iarc.top/141.html 2023-01-11T15:37:00+08:00 推荐一个免费的鼠标指针平台，可用于电脑，也可用于网站！有的鼠标指针格式不是.cur格式，要转换请自行百度一下，这就不赘叙了哈 .button { background-color: #4CAF50; color: white; border: none; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 32px; margin: 4px 2px; cursor: url('/usr/img/icon/Arrowblue.cur'),auto; width:100%; height:250px; } 鼠标移至该区域查看指针效果 网站使用方法：<style type="text/css"> *{ cursor: url('指针链接.cur'),auto; } <style>鼠标指针地址鼠标指针：点我跳转鼠标指针 https://www.iarc.top/132.html 2023-01-01T14:35:00+08:00 {cloud title="3D烟花特效源码" type="lz" url="https://xql.lanzoue.com/ilJp00jttd4f" password=""/}直接解压到本地或网站根目录打开即可添加音乐可参考这两篇文章：使用JS使音乐自动播放的两种方法（不受限于浏览器）JavaScript实现音乐单曲循环 https://www.iarc.top/91.html 2022-12-26T00:16:00+08:00 演示站::(滑稽) 感觉还不错的一款源码 ❤ 里面所有图片均可替换，全开源！https://lab.iarc.top/Christmas-Code/技术栈代码主要是由 HTML + LESS 编写注释在style.less文件，有能力自由发挥~展示图下载地址{hide}{cloud title="https://xql.lanzoue.com/i0SdE0jeuojc" type="lz" url="https://xql.lanzoue.com/i0SdE0jeuojc" password=""/}{/hide} https://www.iarc.top/84.html 2022-12-25T14:12:00+08:00 没有坤坤，那如何能叫新年呢？我们需要要有坤坤，好吧。给你们来一个经典永垂不朽的爱坤打篮球。喜欢的话记得吱一声儿哦。演示站https://lab.iarc.top/cxk/演示图下载地址{hide}{cloud title="cxk打篮球小游戏源码" type="lz" url="https://xql.lanzoue.com/iLNWF0jdf0kd" password=""/}{/hide} https://www.iarc.top/82.html 2022-12-23T22:14:00+08:00 效果图（与本篇文章上面一致）代码：将下面代码加在head标签或者body中即可 年 新 乐 快 .deng-box { position: fixed; top: -40px; right: 150px; z-index: 9999; pointer-events: none; } .deng-box1 { position: fixed; top: -30px; right: 10px; z-index: 9999; pointer-events: none } .deng-box2 { position: fixed; top: -40px; left: 150px; z-index: 9999; pointer-events: none } .deng-box3 { position: fixed; top: -30px; left: 10px; z-index: 9999; pointer-events: none } .deng-box1 .deng, .deng-box3 .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, .8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 5s infinite ease-in-out; box-shadow: -5px 5px 30px 4px #fc903d } .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, .8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px #fa6c00 } .deng-a { width: 100px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, .1); margin: 12px 8px 8px 8px; border-radius: 50% 50%; border: 2px solid #dc8f03 } .deng-b { width: 45px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, .1); margin: -4px 8px 8px 26px; border-radius: 50% 50%; border: 2px solid #dc8f03 } .xian { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px; background: #dc8f03 } .shui-a { position: relative; width: 5px; height: 20px; margin: -5px 0 0 59px; -webkit-animation: swing 4s infinite ease-in-out; -webkit-transform-origin: 50% -45px; background: orange; border-radius: 0 0 5px 5px } .shui-b { position: absolute; top: 14px; left: -2px; width: 10px; height: 10px; background: #dc8f03; border-radius: 50% } .shui-c { position: absolute; top: 18px; left: -2px; width: 10px; height: 35px; background: orange; border-radius: 0 0 0 5px } .deng:before { position: absolute; top: -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block; z-index: 999; border-radius: 5px 5px 0 0; border: solid 1px #dc8f03; background: orange; background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03) } .deng:after { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px; content: " "; display: block; margin-left: 20px; border-radius: 0 0 5px 5px; border: solid 1px #dc8f03; background: orange; background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03) } .deng-t { font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif; font-size: 3.2rem; color: #dc8f03; font-weight: 700; line-height: 85px; text-align: center } .night .deng-box, .night .deng-box1, .night .deng-t { background: 0 0 !important } @-moz-keyframes swing { 0% { -moz-transform: rotate(-10deg) } 50% { -moz-transform: rotate(10deg) } 100% { -moz-transform: rotate(-10deg) } } @-webkit-keyframes swing { 0% { -webkit-transform: rotate(-10deg) } 50% { -webkit-transform: rotate(10deg) } 100% { -webkit-transform: rotate(-10deg) } } <!-- 灯笼代码 --> <meta charset="utf-8"> <div class="deng-box2"> <div class="deng"> <div class="xian"> </div> <div class="deng-a"> <div class="deng-b"> <div class="deng-t">年</div> </div> </div> <div class="shui shui-a"> <div class="shui-c"> </div> <div class="shui-b"></div> </div> </div> </div> <div class="deng-box3"> <div class="deng"> <div class="xian"> </div> <div class="deng-a"> <div class="deng-b"> <div class="deng-t">新</div> </div> </div> <div class="shui shui-a"> <div class="shui-c"></div> <div class="shui-b"> </div> </div> </div> </div> <div class="deng-box1"> <div class="deng"> <div class="xian"> </div> <div class="deng-a"> <div class="deng-b"> <div class="deng-t">乐</div> </div> </div> <div class="shui shui-a"> <div class="shui-c"></div> <div class="shui-b"></div> </div> </div> </div> <div class="deng-box"> <div class="deng"> <div class="xian"> </div> <div class="deng-a"> <div class="deng-b"> <div class="deng-t">快</div> </div> </div> <div class="shui shui-a"> <div class="shui-c"> </div> <div class="shui-b"></div> </div> </div> </div> <style type="text/css"> .deng-box { position: fixed; top: -40px; right: 150px; z-index: 9999; pointer-events: none; } .deng-box1 { position: fixed; top: -30px; right: 10px; z-index: 9999; pointer-events: none } .deng-box2 { position: fixed; top: -40px; left: 150px; z-index: 9999; pointer-events: none } .deng-box3 { position: fixed; top: -30px; left: 10px; z-index: 9999; pointer-events: none } .deng-box1 .deng, .deng-box3 .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, .8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 5s infinite ease-in-out; box-shadow: -5px 5px 30px 4px #fc903d } .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, .8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px #fa6c00 } .deng-a { width: 100px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, .1); margin: 12px 8px 8px 8px; border-radius: 50% 50%; border: 2px solid #dc8f03 } .deng-b { width: 45px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, .1); margin: -4px 8px 8px 26px; border-radius: 50% 50%; border: 2px solid #dc8f03 } .xian { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px; background: #dc8f03 } .shui-a { position: relative; width: 5px; height: 20px; margin: -5px 0 0 59px; -webkit-animation: swing 4s infinite ease-in-out; -webkit-transform-origin: 50% -45px; background: orange; border-radius: 0 0 5px 5px } .shui-b { position: absolute; top: 14px; left: -2px; width: 10px; height: 10px; background: #dc8f03; border-radius: 50% } .shui-c { position: absolute; top: 18px; left: -2px; width: 10px; height: 35px; background: orange; border-radius: 0 0 0 5px } .deng:before { position: absolute; top: -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block; z-index: 999; border-radius: 5px 5px 0 0; border: solid 1px #dc8f03; background: orange; background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03) } .deng:after { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px; content: " "; display: block; margin-left: 20px; border-radius: 0 0 5px 5px; border: solid 1px #dc8f03; background: orange; background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03) } .deng-t { font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif; font-size: 3.2rem; color: #dc8f03; font-weight: 700; line-height: 85px; text-align: center } .night .deng-box, .night .deng-box1, .night .deng-t { background: 0 0 !important } @-moz-keyframes swing { 0% { -moz-transform: rotate(-10deg) } 50% { -moz-transform: rotate(10deg) } 100% { -moz-transform: rotate(-10deg) } } @-webkit-keyframes swing { 0% { -webkit-transform: rotate(-10deg) } 50% { -webkit-transform: rotate(10deg) } 100% { -webkit-transform: rotate(-10deg) } } </style> https://www.iarc.top/73.html 2022-12-17T01:18:09+08:00 前言：此款源码目前还未泛滥，而且还是挺好看的，今天免费分享给大家泛滥~{cloud title="支持手机动态背景响应式主页（已添加本站自动播放音乐js）" type="lz" url="https://xql.lanzoue.com/itPwy0ivbdji" password=""/} https://www.iarc.top/55.html 2022-12-12T01:40:00+08:00 前言众所周知，网站上声音无法自动播放一直是IOS/Android上的惯例。桌面版Safari也在2017年第11版宣布禁止带声音的多媒体自动播放功能。随后2018年4月发布的Chrome 66正式关闭了声音的自动播放，这意味着音频自动播放和视频自动播放在桌面浏览器中也会失效。而通过网上搜索来解决这个问题，大部分都会提到使用javascript原生的play()来解决。但是，当你运行它的时候，你会发现你在Chrome浏览器下调用play后的错误：DOMException: play() failed because the user didn’t interact with the document first.但是，如果你想的是将音频当作背景音乐来播放时，当页面加载时音频文件就会自动响起，这个时候，用户是没有与页面进行数据交互的，所以play()会报错，很多人百度后便会找到两种主流的方法这里就不赘叙浏览器如何设置成自动播放了，因为你总不能让用户访问网站之前让他提前设置好浏览器自动播放的吧方法一//浏览器适用 contextClass = window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext; try { var context = new contextClass(); var source = null; var audioBuffer = null; function stopSound() { if (source) { source.stop(musics); //立即停止 } } function playSound() { source = context.createBufferSource(); source.buffer = audioBuffer; source.loop = true; source.connect(context.destination); source.start(0); //立即播放 } function initSound(arrayBuffer) { context.decodeAudioData(arrayBuffer, function(buffer) { //解码成功时的回调函数 audioBuffer = buffer; playSound(); }, function(e) { //解码出错时的回调函数 console.log('404', e); }); } function loadAudioFile(url) { var xhr = new XMLHttpRequest(); //通过XHR下载音频文件 xhr.open('GET', url, true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { //下载完成 initSound(this.response); }; xhr.send(); } //这里用来存储背景音乐的路径 loadAudioFile('audio/music.flac'); } catch (e) { console.log('无法找到音乐！'); }构建播放器后，可以在进入页面时缓存，然后自动播放背景音乐，不考虑浏览器。方法二 <script> var audio=document.createElement('audio'); audio.src='http://music.163.com/song/media/outer/url?id=31365604.mp3'; audio.autoplay=true; var duration; duration=audio.duration;//长度单位是秒 function bgm(){ audio.play();//播放 } window.setInterval("bgm()",duration*1000+1000); document.head.appendChild(audio); </script>注意事项 这种方法只对浏览器有效，无法实现APP上自动播放音乐的效果。 https://www.iarc.top/52.html 2022-12-10T15:00:00+08:00 仅需50行即可获得一个简单的代码雨源码<canvas id="canvas" style="background:black" width="620" height="340"></canvas> <style type="text/css"> body{margin: 0; padding: 0; overflow: hidden;} </style> <script type="text/javascript"> window.onload = function(){ //获取图形对象 var canvas = document.getElementById("canvas"); //获取图形的上下文 var context = canvas.getContext("2d"); //获取浏览器屏幕的宽度和高度 var W = window.innerWidth; var H = window.innerHeight; //设置canvas的宽度和高度 canvas.width = W; canvas.height = H; //每个文字的字体大小 var fontSize = 15; //计算列 var colunms = Math.floor(W /fontSize); //记录每列文字的y轴坐标 var drops = []; //给每一个文字初始化一个起始点的位置 for(var i=0;i<colunms;i++){ drops.push(0); } //运动的文字 var str ="01abcdefghijklmnopqurstuvwxyz"; //4:fillText(str,x,y);原理就是去更改y的坐标位置 //绘画的函数 function draw(){ //让背景逐渐由透明到不透明 context.fillStyle = "rgba(0,0,0,0.05)"; context.fillRect(0,0,W,H); //给字体设置样式 //context.font = "700 "+fontSize+"px 微软雅黑"; context.font = fontSize + 'px arial'; //给字体添加颜色 context.fillStyle ="#00ff00";//随意更改字体颜色 //写入图形中 for(var i=0;i<colunms;i++){ var index = Math.floor(Math.random() * str.length); var x = i*fontSize; var y = drops[i] *fontSize; context.fillText(str[index],x,y); //如果要改变时间，肯定就是改变每次他的起点 if(y >= canvas.height && Math.random() > 0.92){ drops[i] = 0; } drops[i]++; } }; function randColor(){ var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb("+r+","+g+","+b+")"; } draw(); setInterval(draw,33); }; </script>演示站：https://lab.iarc.top/coderain/ https://www.iarc.top/48.html 2022-12-06T19:23:00+08:00 源代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>iarc.top/x</title> <style> html,body{ margin:0px; width:100%; height:100%; overflow:hidden; background:#000; } #canvas{ position:absolute; width:100%; height:100%; } </style> </head> <body> <canvas id="canvas"></canvas> <script> function project3D(x,y,z,vars){ var p,d; x-=vars.camX; y-=vars.camY-8; z-=vars.camZ; p=Math.atan2(x,z); d=Math.sqrt(x*x+z*z); x=Math.sin(p-vars.yaw)*d; z=Math.cos(p-vars.yaw)*d; p=Math.atan2(y,z); d=Math.sqrt(y*y+z*z); y=Math.sin(p-vars.pitch)*d; z=Math.cos(p-vars.pitch)*d; var rx1=-1000; var ry1=1; var rx2=1000; var ry2=1; var rx3=0; var ry3=0; var rx4=x; var ry4=z; var uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1); var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc; var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc; if(!z)z=0.000000001; if(ua>0&&ua<1&&ub>0&&ub<1){ return { x:vars.cx+(rx1+ua*(rx2-rx1))*vars.scale, y:vars.cy+y/z*vars.scale, d:(x*x+y*y+z*z) }; }else{ return { d:-1 }; } } function elevation(x,y,z){ var dist = Math.sqrt(x*x+y*y+z*z); if(dist && z/dist>=-1 && z/dist <=1) return Math.acos(z / dist); return 0.00000001; } function rgb(col){ col += 0.000001; var r = parseInt((0.5+Math.sin(col)*0.5)*16); var g = parseInt((0.5+Math.cos(col)*0.5)*16); var b = parseInt((0.5-Math.sin(col)*0.5)*16); return "#"+r.toString(16)+g.toString(16)+b.toString(16); } function interpolateColors(RGB1,RGB2,degree){ var w2=degree; var w1=1-w2; return [w1*RGB1[0]+w2*RGB2[0],w1*RGB1[1]+w2*RGB2[1],w1*RGB1[2]+w2*RGB2[2]]; } function rgbArray(col){ col += 0.000001; var r = parseInt((0.5+Math.sin(col)*0.5)*256); var g = parseInt((0.5+Math.cos(col)*0.5)*256); var b = parseInt((0.5-Math.sin(col)*0.5)*256); return [r, g, b]; } function colorString(arr){ var r = parseInt(arr[0]); var g = parseInt(arr[1]); var b = parseInt(arr[2]); return "#"+("0" + r.toString(16) ).slice (-2)+("0" + g.toString(16) ).slice (-2)+("0" + b.toString(16) ).slice (-2); } function process(vars){ if(vars.points.length<vars.initParticles) for(var i=0;i<5;++i) spawnParticle(vars); var p,d,t; p = Math.atan2(vars.camX, vars.camZ); d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ); d -= Math.sin(vars.frameNo / 80) / 25; t = Math.cos(vars.frameNo / 300) / 165; vars.camX = Math.sin(p + t) * d; vars.camZ = Math.cos(p + t) * d; vars.camY = -Math.sin(vars.frameNo / 220) * 15; vars.yaw = Math.PI + p + t; vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2; var t; for(var i=0;i<vars.points.length;++i){ x=vars.points[i].x; y=vars.points[i].y; z=vars.points[i].z; d=Math.sqrt(x*x+z*z)/1.0075; t=.1/(1+d*d/5); p=Math.atan2(x,z)+t; vars.points[i].x=Math.sin(p)*d; vars.points[i].z=Math.cos(p)*d; vars.points[i].y+=vars.points[i].vy*t*((Math.sqrt(vars.distributionRadius)-d)*2); if(vars.points[i].y>vars.vortexHeight/2 || d<.25){ vars.points.splice(i,1); spawnParticle(vars); } } } function drawFloor(vars){ var x,y,z,d,point,a; for (var i = -25; i <= 25; i += 1) { for (var j = -25; j <= 25; j += 1) { x = i*2; z = j*2; y = vars.floor; d = Math.sqrt(x * x + z * z); point = project3D(x, y-d*d/85, z, vars); if (point.d != -1) { size = 1 + 15000 / (1 + point.d); a = 0.15 - Math.pow(d / 50, 4) * 0.15; if (a > 0) { vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(d/26-vars.frameNo/40),[0,128,32],.5+Math.sin(d/6-vars.frameNo/8)/2)); vars.ctx.globalAlpha = a; vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size); } } } } vars.ctx.fillStyle = "#82f"; for (var i = -25; i <= 25; i += 1) { for (var j = -25; j <= 25; j += 1) { x = i*2; z = j*2; y = -vars.floor; d = Math.sqrt(x * x + z * z); point = project3D(x, y+d*d/85, z, vars); if (point.d != -1) { size = 1 + 15000 / (1 + point.d); a = 0.15 - Math.pow(d / 50, 4) * 0.15; if (a > 0) { vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(-d/26-vars.frameNo/40),[32,0,128],.5+Math.sin(-d/6-vars.frameNo/8)/2)); vars.ctx.globalAlpha = a; vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size); } } } } } function sortFunction(a,b){ return b.dist-a.dist; } function draw(vars){ vars.ctx.globalAlpha=.15; vars.ctx.fillStyle="#000"; vars.ctx.fillRect(0, 0, canvas.width, canvas.height); drawFloor(vars); var point,x,y,z,a; for(var i=0;i<vars.points.length;++i){ x=vars.points[i].x; y=vars.points[i].y; z=vars.points[i].z; point=project3D(x,y,z,vars); if(point.d != -1){ vars.points[i].dist=point.d; size=1+vars.points[i].radius/(1+point.d); d=Math.abs(vars.points[i].y); a = .8 - Math.pow(d / (vars.vortexHeight/2), 1000) * .8; vars.ctx.globalAlpha=a>=0&&a<=1?a:0; vars.ctx.fillStyle=rgb(vars.points[i].color); if(point.x>-1&&point.x<vars.canvas.width&&point.y>-1&&point.y<vars.canvas.height)vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size); } } vars.points.sort(sortFunction); } function spawnParticle(vars){ var p,ls; pt={}; p=Math.PI*2*Math.random(); ls=Math.sqrt(Math.random()*vars.distributionRadius); pt.x=Math.sin(p)*ls; pt.y=-vars.vortexHeight/2; pt.vy=vars.initV/20+Math.random()*vars.initV; pt.z=Math.cos(p)*ls; pt.radius=200+800*Math.random(); pt.color=pt.radius/1000+vars.frameNo/250; vars.points.push(pt); } function frame(vars) { if(vars === undefined){ var vars={}; vars.canvas = document.querySelector("canvas"); vars.ctx = vars.canvas.getContext("2d"); vars.canvas.width = document.body.clientWidth; vars.canvas.height = document.body.clientHeight; window.addEventListener("resize", function(){ vars.canvas.width = document.body.clientWidth; vars.canvas.height = document.body.clientHeight; vars.cx=vars.canvas.width/2; vars.cy=vars.canvas.height/2; }, true); vars.frameNo=0; vars.camX = 0; vars.camY = 0; vars.camZ = -14; vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2; vars.yaw = 0; vars.cx=vars.canvas.width/2; vars.cy=vars.canvas.height/2; vars.bounding=10; vars.scale=500; vars.floor=26.5; vars.points=[]; vars.initParticles=700; vars.initV=.01; vars.distributionRadius=800; vars.vortexHeight=25; } vars.frameNo++; requestAnimationFrame(function() { frame(vars); }); process(vars); draw(vars); } frame(); </script> </body> </html>演示站点：https://lab.iarc.top/xuanwo