css
1.使用递归的方式实现数组、对象的深拷贝2.js获取url的参数3.弹框组件el-tree+vue3必坑指南4.在Vue 3中，与Vue 2相比，有一些改进和优化的diff算法。5.浏览器解析html6.浏览器渲染HTML7.Object.entries()8.vue实现虚拟dom转换成真是dom的原理9.全局封装组件处理并发请求不连续的loading10.为什么vue数组下标修改监听不到11.vue里表单验证的v-model.number的坑12.有意思的css13.js原生语音转文字14.js手写一个call15.js手写一个apply16. 手写一个 bind 方法17.js寄生组合式继承18.react中的useState修改状态获取最新状态值19.函数柯里化js20.axios请求中断_下载中断和下载进度21.axios请求重试_核心原理22.axios请求重试_axios-retry插件23.虚拟列表-渲染 10 万条数据24.vue-office 组件25.threejs26.把原生 DOM 标签转换后加入到 3D 场景空间中显示27.three.js 物体要使用光线投射技术，计算是否点击位置与物体有交叉28.threejs基本函数29.二分查找算法30.js判断字符串是否连贯31.世界坐标系和模型坐标系32.设置车模型中每个小物体 castShadow = true33.Vue3 echarts 组件化使用 resizeObserver34.网页验证码的作用 *网页中几种常见验证码35.多个装饰器一起es6装饰器36.flex属性37.移动端兼容问题38.那什么是URL、URI、URN？39.threejs的坐标渲染和着色40.着色器41.基于 three.js 加载器分别加载模型42.echarts自适应大屏方案 亲测有用43.有趣的工具44.关于threejs中鼠标左右移动，左动看右边，右动看左边45.有趣的知识点threejs46.uniapp底层跨端原理47.防止XSS（跨站脚本攻击）漏洞48.启动vite和electron项目配置多个主进程49.margin-bottom:-1px无效的问题50.九宫格css51.css伪类选择器52.uniapp关于uni.getUserProfile的使用53.uniapp获取用户信息54.在项目中使用UEditor碰到的几个问题55.一维数组转二位数组56.使用此函数对数组进行分块，并在最后一组添加特定的值57.如果win报错无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本58.阅读时间缓存（快应用）59.uniapp中OnShow获取缓存60.之前使用抖音的担保支付，后俩转换成通用的交易方式61.width:100%与width:auto区别62.leetcode1047字符串反复去重（栈）63.由于<textarea>在某些平台上会创建一个原生控件，这可能会导致层级问题，尤其是在安卓设备上。在uni-app中，对于这种情况，通常推荐的解决方案是使用<cover-view>组件来覆盖原生组件，但是这种做法通常用于覆盖地图、视频等原生组件，而不是<textarea>64.记录一次uniapp使用scrollview65.微前端(矩阵项目)代码将单个文件合并到指定分支66.推荐一个炫酷爆炸例子67.思维导图推荐包68.自适应高度的过渡69.自定义滚动条边角70.实现下划线动画71.js不同类型比较
72.css
73.sse74.ECMAScript 语言规范每年都会进行一次更新，而备受期待的 ECMAScript 2024 将于 2024 年 6 月正式亮相。目前，ECMAScript 2024 的候选版本已经发布，为我们带来了一系列实用的新功能。75.前端scale负数表示翻转76.关于小说阅读前端翻页插件推荐turn.js77.数组扁平化78.Vue-Plugin-HiPrint79.好玩的vue组件80.DOMRect对象81.js中关于return和if条件处理82.关于文心一言不能打开F12开发者工具83.js文字处理两端展示中间省略号84.[popover, select] el-popover内有select的时候在选择后会自动关闭85.说一下flex的属性86.vue3中404路由匹配规则87.shape-outside88.createRange表示文档中的一个范围——用于js判断文字添加省略号情况89.uniapp+vue3 使用list触底+下拉90.diff算法vue91.动态修改manifest.json92.记录一下大小写导致的问题93.微信小程序关于小说类使用官方阅读器94.VS Code侧边栏的“资源管理器”丢了95.nestjs中服务引入控制器和模块的作用波浪
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>波浪</title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.blue{
width: 100%;
height: 100vh;
overflow: hidden;
background: #87CEEB;
position: relative;
}
.white{
width: 400vw;
height: 400vw;
position: absolute;
left: -150vw;
top: -365vw;
background: #fff;
border-radius: 45%;
animation:rotates 12s linear infinite ;
}
@keyframes rotates{
from{
transform: rotate(0);
}
to{transform: rotate(360deg);}
}
</style>
<body>
<div class="blue">
<div class="white"></div>
</div>
</body>
</html>
粒子1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>粒子字体</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
position: relative;
z-index: 55;
}
.box{
position: absolute;
z-index: 66;
width: 200px;
height: 50px;
bottom: 20px;
left: 47%;
border:2px solid skyblue;
color: skyblue;
cursor: pointer;
font-size: 30px;
line-height: 46px;
text-align: center;
font-weight: bold;
}
.box1{
left: 20%;
}
.box2{
left: 50%;
}
.box3{
left: 80%;
}
</style>
</head>
<body onload="draw();">
<div class="box box2" onclick="btnClick1()">白狗</div>
<div class="box box1" onclick="btnClick2()">汪</div>
<div class="box box3" onclick="btnClick3()">心</div>
</body>
<script src="../../js/lib/three.js"></script>
<script src="../../js/lib/OrbitControls.js"></script>
<script src="../../js/lib/stats.min.js"></script>
<script src="../../js/lib/dat.gui.min.js"></script>
<script src="../../js/lib/Detector.js"></script>
<script src="../../js/lib/tween.min.js"></script>
<!--<script src="../../js/lib/Projector.js"></script>-->
<script>
var renderer, camera, scene, gui, light, stats, controls;
//字体的点集
var originParticleField,pointsMaterial,geo_ver,geo_ver2,tween,hearts=[];
//初始点
var baseLens =10000,basePoint=[],baseArea=160;
for(var i=0;i<baseLens;i++){
var x= Number(Math.random()*baseArea)-baseArea/2;
var y= Number(Math.random()*baseArea)-baseArea/2;
var z= Number(Math.random()*baseArea)-baseArea/2;
var obj = {
x:x,
y:y,
z:z
}
basePoint.push(obj);
}
function initRender() {
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xeeeeee);
renderer.shadowMap.enabled = true;
//告诉渲染器需要阴影效果
document.body.appendChild(renderer.domElement);
}
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
camera.position.set(0, 20, 80 );
}
function initScene() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa0a0a0 );
scene.fog = new THREE.Fog( 0xa0a0a0, 5, 250 );
}
//初始化dat.GUI简化试验流程
function initGui() {
//声明一个保存需求修改的相关数据的对象
gui = {
bump:0.03,
animation:false
};
var datGui = new dat.GUI();
//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
datGui.add(gui, "bump", -1, 1).onChange(function (e) {
cube1.material.bumpScale = e;
});
datGui.add(gui, "animation");
}
function initLight() {
scene.add(new THREE.AmbientLight(0x444444));
light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 600, 240 );
light.castShadow = true;
light.shadow.camera.top = 10;
light.shadow.camera.bottom = -10;
light.shadow.camera.left = -10;
light.shadow.camera.right = 10;
//告诉平行光需要开启阴影投射
light.castShadow = true;
// scene.add(light);
}
function initModel() {
//辅助工具
var helper = new THREE.AxesHelper(50);
scene.add(helper);
// 地板
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 400, 400 ), new THREE.MeshPhongMaterial( { color: 0xffffff, depthWrite: false } ) );
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );
//添加地板割线
var grid = new THREE.GridHelper( 400, 50, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );
//获取点集
getFontPoints('白狗','geo_ver',-23,0,0);
getFontPoints('汪','geo_ver2',-8,0,0);
//用点画字
pointsMaterial = new THREE.PointsMaterial({
color:0xffffff,
size:0.5,
transparent:true,//使材质透明
blending:THREE.AdditiveBlending,
depthTest:false,//深度测试关闭，不消去场景的不可见面
map:createLightMateria()//刚刚创建的粒子贴图就在这里用上
});
var originGeo = new THREE.Geometry();
for (var i = 0; i <baseLens; i++){//循环创建Geo
var x = basePoint[i].x;
var y = basePoint[i].y;
var z = basePoint[i].z;
originGeo.vertices.push(new THREE.Vector3(x,y,z));
}
originParticleField = new THREE.Points(originGeo,pointsMaterial);
// originParticleField.position.set(-20,10,0);
scene.add(originParticleField);
}
//获取 文字的点集
function getFontPoints(txt,type,x,y,z){
if(!x){var x=0;}
if(!y){var y=0;}
if(!z){var z=0;}
var move =true;
if(x==0&&y==0&&z==0){move = false;}
var res = [];
var loader = new THREE.FontLoader();
loader.load("../../json/KaiTi.json",function(text){
var gem2 = new THREE.TextGeometry(txt, {
size: 16, //字号大小，一般为大写字母的高度
height: 0.5, //文字的厚度
weight: 'normal', //值为'normal'或'bold'，表示是否加粗
font: text, //字体，默认是'helvetiker'，需对应引用的字体文件
style: 'normal', //值为'normal'或'italics'，表示是否斜体
bevelThickness: 0.5, //倒角厚度
bevelSize: 0.5, //倒角宽度
curveSegments: 8,//弧线分段数，使得文字的曲线更加光滑
bevelEnabled: true, //布尔值，是否使用倒角，意为在边缘处斜切
});
res = gem2.vertices;
//字体一般不是居中的，需要手动调下
if(move){
var lens= res.length;
var attrs = [];
for(var i=0;i<lens;i++){
var obj = {
x:res[i].x+x,
y:res[i].y+y,
z:res[i].z+z,
}
attrs.push(obj);
}
res = attrs;
}
switch(type){
case 'geo_ver':
geo_ver = res;
break;
case 'geo_ver2':
geo_ver2 = res;
break;
}
});
}
//获取桃心的点集
function heart(){
var res = [];
var a=10,x=-180,a0=0,b0=0,c0=0,y=0;
t = 0;
for(var i=0;i<360;i++){
t=(i+t)*Math.PI/180;
y=a*(2*Math.cos(t)-Math.cos(2*t));
x=a*(2*Math.sin(t)-Math.sin(2*t));
var obj = {
x:x,
y:y+20,
z:0
}
res.push(obj);
var obj = {
x:x*(17/20),
y:y*(17/20)+20,
z:0
}
res.push(obj);
var obj = {
x:x*(13/20),
y:y*(13/20)+20,
z:0
}
res.push(obj);
}
hearts =res;
}
function pointMove(position1){
//移除粒子浮动动画
// TWEEN.removeAll();
var pointNow = originParticleField.geometry.vertices;
var lens0 = position1.length;
var pos = {val:1};
var callback=function(){
var val = this.val;
var particles = originParticleField.geometry.vertices;
// return console.log(particles);
for(var i = 0; i < baseLens; i++) {
var pos = particles[i];
if(i<lens0){
pos.x = pointNow[i].x * val + position1[i].x * (1-val);
pos.y = pointNow[i].y * val + position1[i].y * (1-val);
pos.z = pointNow[i].z * val + position1[i].z * (1-val);
}else{
pos.x = pointNow[i].x * val + basePoint[i].x * (1-val);
pos.y = pointNow[i].y * val + basePoint[i].y * (1-val);
pos.z = pointNow[i].z * val + basePoint[i].z * (1-val);
}
}
originParticleField.geometry.verticesNeedUpdate = true;
}
tween = new TWEEN.Tween(pos).to({val: 0}, 2000).easing(TWEEN.Easing.Quadratic.InOut).delay(500).onUpdate(callback);
tween.start();
}
//粒子浮动动画
//绘制粒子贴图，
function createLightMateria() {
var canvasDom = document.createElement('canvas');
canvasDom.width = 16;
canvasDom.height = 16;
var ctx = canvasDom.getContext('2d');
//根据参数确定两个圆的坐标，绘制放射性渐变的方法，一个圆在里面，一个圆在外面
var gradient = ctx.createRadialGradient(
canvasDom.width/2,
canvasDom.height/2,
0,
canvasDom.width/2,
canvasDom.height/2,
canvasDom.width/2);
gradient.addColorStop(0,'rgba(255,255,255,1)');
gradient.addColorStop(0.005,'rgba(139,69,19,1)');
gradient.addColorStop(0.4,'rgba(139,69,19,1)');
gradient.addColorStop(1,'rgba(0,0,0,1)');
//设置颜色为渐变
ctx.fillStyle = gradient;
//绘图
ctx.fillRect(0,0,canvasDom.width,canvasDom.height);
//贴图使用
let texture = new THREE.Texture(canvasDom);
texture.needsUpdate = true;//使用贴图时进行更新
return texture;
}
//初始化性能插件
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
function initControls() {
controls = new THREE.OrbitControls(camera, renderer.domElement);
//设置控制器的中心点
controls.target.set( 0, 5, 0 );
// 如果使用animate方法时，将此函数删除
//controls.addEventListener( 'change', render );
// 使动画循环使用时阻尼或自转 意思是否有惯性
controls.enableDamping = true;
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
//controls.dampingFactor = 0.25;
//是否可以缩放
controls.enableZoom = true;
//是否自动旋转
controls.autoRotate = false;
controls.autoRotateSpeed = 0.5;
//设置相机距离原点的最远距离
controls.minDistance = 1;
//设置相机距离原点的最远距离
controls.maxDistance = 2000;
//是否开启右键拖拽
controls.enablePan = true;
}
function render() {
controls.update();
}
//窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
//更新控制器
render();
//更新性能插件
stats.update();
TWEEN.update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
function draw() {
//兼容性判断
if (!Detector.webgl) Detector.addGetWebGLMessage();
initGui();
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
animate();
window.onresize = onWindowResize;
}
//汪
function btnClick2(){
pointMove(geo_ver2);
}
//白狗
function btnClick1(){
pointMove(geo_ver);
}
//白狗
function btnClick3(){
pointMove(hearts);
}
heart();
</script>
</html>
抽奖推荐这个大佬(很棒)
https://github.com/baiDog/something/tree/master/test
本文来自博客园，作者：jialiangzai，转载请注明原文链接：https://www.cnblogs.com/zsnhweb/p/18003466
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！