- 博客(18)
- 收藏
- 关注
RSS订阅原创 vue3 音频播放可视化
2、播放时波形颜色改变，代表当前播放进度(已播放部分 - 蓝色，当前播放 - 红色，未播放部分 - 灰色）3、点击音波位置，可直接跳转到当前音频位置并进行播放。1、根据音频音量生成40个音量波形。
2025-08-05 14:23:17
127
原创 CSS perspective 属性详解：打造3D视觉空间
属性用于设置 3D元素的透视观察距离，类似于在元素正前方（默认位置）放置一个摄像头：数值越小（如 ），摄像头距离元素越近，透视效果越强烈（变形更明显）数值越大（如 ），摄像头距离越远，元素看起来更接近原始大小💡 最佳实践：优先设置在父元素上，性能更好且空间更自然只有配合以下3D变换属性使用时才会生效：：绕X轴旋转（上下倾斜）：绕Y轴旋转（左右倾斜）：沿Z轴移动（靠近/远离摄像头）父元素设置典型值：子元素变换组合示例： 6. ：摄像机的机位调整 可以理解为 调整摄像机的位置，控制你从哪个角度观
2025-07-04 10:05:28
274
原创 mask-imag实现文字渐显渐消效果
2、使用css动画，修改mask-position 的值，因为css动画无法控制mask-imag的值过渡，会直接跳变。方案二：使用css动画 通过修改mask-position 的值。1、使用gsap 通过修改mask-imag的值进行过渡。方案一：使用gsap 通过修改mask-imag的值。
2025-07-02 14:40:57
107
原创 使用 font-spider(字蛛) 从完整字体包中提取指定文字
安装font-spider： npm install font-spider -g。验证是否安装成功： font-spider --version。）会被直接覆盖为裁剪后的版本（仅含「彧」字）。如果需要保留原文件，建议提前备份，或使用。，确认页面能正常显示「彧」字且无其他字符。替换为你的原始字体文件名（如。文件，检查是否仅包含「彧」字。创建一个 HTML 文件（如。裁剪后的字体会保存在。，其他字符会被忽略。
2025-04-24 16:51:15
439
原创 css transform-origin属性介绍
transform-origin属性，用于设置元素变换（如旋转、缩放、倾斜等）的基准点（原点）第一个值：水平方向基准点（默认 ，可用 、、 或长度值如 ）第二个值：垂直方向基准点（默认 ，可用 、、 或长度值如 ）第三个值（可选）：3D 变换时的深度基准点（仅适用于 3D 变换，如 ，需用长度值如 ）默认值：transform-origin: 50% 50% 0当对这个元素应用变换（如 , , 等）时，变换会以这个设定的原点为基准。例如：如果旋转元素，它会围绕这个点旋转。如果缩放元素，会从这个点向外或向
2025-03-27 15:09:38
352
原创 css mask-image属性介绍
mask-image属性可以让元素的部分或全部区域变透明，但它不是直接设置元素的透明度（opacity），而是通过遮罩来控制元素的显示和隐藏#000（纯黑色） → 对应区域完全显示（不透明）或（完全透明） → 对应区域完全隐藏（透明）中间灰度值（如） → 对应区域半透明。
2025-03-26 13:04:09
568
原创 JavaScript 任务队列以及事件循环机制，简单理解
在js中，任务队列是异步编程的核心概念，它允许js引擎按照特定的顺序执行代码片段，即使js本身是单线程的。任务队列通过事件循环（Event Loop）来管理，确保代码的执行顺序和时机。
2025-03-20 10:59:16
453
原创 Tailwind CSS自定义屏幕宽度断点
在你的 CSS 入口文件中（如 src/index.css 或 styles.css）导入 Tailwind 的基础样式。创建 tailwind.config.js 配置文件。运行以下命令来生成默认的配置。5.按照Tailwind CSS语法规则开发。2.初始化 Tailwind CSS 配置。1.安装tailwindcss。3.配置 CSS 入口文件。
2024-11-06 09:57:50
427
原创 使用webpack自定义样式单位
在项目根目录创建文件在中添加一个来验证插件是否加载成功(启动时终端打印)console.log("检查是否生效111");return {
2024-11-05 13:12:44
210
原创 scroll-snap-type结合scroll-snap-align使用和介绍
【代码】scroll-snap-type结合scroll-snap-align使用和介绍。
2024-08-26 14:00:34
628
原创 多个树形结构数组合并为一个树结构
"folderName": "测试22第二层","folderName": "第三层","folderName": "第二层","folderName": "第二层","folderName": "第二层","folderName": "第二层","folderName": "测试22","folderName": "测试","folderName": "测试","folderName": "测试","folderName": "测试","folderName": "测试",
2023-05-31 10:57:32
57
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人