ZeroAnon https://zeroanon.com 博客订阅 zh-CN Tue, 09 Jun 2026 09:00:03 GMT <![CDATA[Projects]]> https://zeroanon.com/projects https://zeroanon.com/projects Tue, 09 Jun 2026 09:00:03 GMT <![CDATA[code-review Skill 使用说明]]> https://zeroanon.com/others/code-review-help https://zeroanon.com/others/code-review-help Mon, 08 Jun 2026 08:00:00 GMT :::step 安装 Skill 推荐全局安装，所有项目可用： ``]]> <![CDATA[MDX 作者使用说明]]> https://zeroanon.com/others/mdx-showcase https://zeroanon.com/others/mdx-showcase Tue, 02 Jun 2026 10:00:00 GMT {label}; } ``` ## 2. 多 Tab 代码（`::start:tabs`） **不要**手写 ``。用注释块书写，构建时自动展开为 Tab 代码 UI。 ### 2.1 多文件（`variant="files"`） ```ts tit]]> <![CDATA[zero-tui 产品介绍与使用帮助]]> https://zeroanon.com/others/zero-tui-help https://zeroanon.com/others/zero-tui-help Tue, 12 May 2026 16:00:00 GMT :::step 安装 全局安装包名为 **`zero-tui`**： ```bash title="安装" npm install --global zero-tui ``` ::: :::step 启动 安装后在终端执行： ```bash title="启动" zero ``` ::: ## Slash 命令一览 以下为当前版本的命令触发与简要说明（具体用法以终端内 `/help` 为准）。 > [!tip] 在 TUI 里输入 > 下列 `/skill` 等命令请在终端运行 ]]> <![CDATA[z-code-tools 使用说明]]> https://zeroanon.com/others/z-code-tools-help https://zeroanon.com/others/z-code-tools-help Sat, 18 Apr 2026 18:00:00 GMT ### 2. 快捷键生成演示 <![CDATA[Horizon-Hop 使用帮助]]> https://zeroanon.com/others/horizon-hop-help https://zeroanon.com/others/horizon-hop-help Thu, 16 Apr 2026 16:00:00 GMT ## 项目简介 **Horizon-Hop** 是一款轻量、克制、但非常实用的浏览器效率插件。 我们希望把那些你在浏览器里会高频用到的小能力，认真做成一个顺手、好看、打开就能用的工具集合。它不是一个什么都想做的大而全平台，而是一套更聚焦的浏览器工作台，帮你把二维码生成、JSON 处理、图片压缩、变量命名、表格结构整理这些常见操作，留在当前浏览器里完成。 如果你经常在网页、文档、接口数据、临时素材和开发辅助工具之间来回切换，Horizon-Hop 会是一个刚刚好的补充层。 ## 现在的 Horizon-Hop 能做什么 目前插件主要围绕以下几类场景展开： - **当前网页二维码生成**：打开首页即可为当前网页生成]]> <![CDATA[关于Mysql的一些笔记]]> https://zeroanon.com/blog/mysql https://zeroanon.com/blog/mysql Thu, 02 Apr 2026 10:26:00 GMT [!note] 学习背景 > 最近在写个人站后端，从零补 PHP、ThinkPHP、PhpStorm 与 MySQL，本文是笔记整理。 # 关于SQL语句的分类 > [!tip] 记忆方式 > SQL 语句较多，按 DQL / DML / DDL / DCL 分类更容易记。 ```sql title="DQL" DQL: 数据查询语言 (凡是带有select关键字的都是查询语句) selsect... ``` ```sql title="DML 增删改" DML: 数据操作语言 (凡是对表当中的数据进行增删改的都是DML) insert 增 delete 删 updata 改 ``` ```sql title="DDL" DML: 数据操作语言 (DDL主要操作的是表的结构，不是表的数据，例如删除列) create 新建 等同于增 drop 删除 alter 修改 ``` ```sql title="TCL" TCL: 事务控制语言 事务提交： commit 事务回滚： rollback ``` ]]> <![CDATA[你始终要有一颗属于自己的心和精神世界不受影响]]> https://zeroanon.com/myself/forget-the-past https://zeroanon.com/myself/forget-the-past Mon, 09 Mar 2026 14:23:00 GMT <![CDATA[使用 giscus 为静态博客添加轻量评论系统]]> https://zeroanon.com/blog/use-giscus https://zeroanon.com/blog/use-giscus Tue, 20 Jan 2026 10:00:00 GMT <![CDATA[add me]]> https://zeroanon.com/others/wechat https://zeroanon.com/others/wechat Sat, 20 Dec 2025 10:26:00 GMT ]]> <![CDATA[Horizon Hop 隐私政策]]> https://zeroanon.com/others/horizon-hop https://zeroanon.com/others/horizon-hop Tue, 03 Jun 2025 16:00:00 GMT <![CDATA[plasmo - 浏览器插件框架]]> https://zeroanon.com/blog/plasmo https://zeroanon.com/blog/plasmo Mon, 14 Apr 2025 18:26:00 GMT <![CDATA[svg按钮hover线条动画]]> https://zeroanon.com/interesting/svg-button-hover https://zeroanon.com/interesting/svg-button-hover Mon, 17 Mar 2025 10:30:00 GMT SVG 按钮 hover 线条动画。 使用了  `stroke-dasharray`  和  `stroke-dashoffset`  控制线条动画。 具体的可以看看这篇文章： [【Web 动画】SVG 线条动画入门](https://www.cnblogs.com/coco1s/p/6225973.html) ```html title="index.html"
hover
 retina屏下的1px线的实现 https://zeroanon.com/interesting/retina-line-1px https://zeroanon.com/interesting/retina-line-1px Mon, 17 Mar 2025 09:30:00 GMT <RetinaLine /> retina 屏下的 1px 线的实现，适用于 dpr：2 的情况。 - 法一：使用渐变实现，使用两种颜色填充 1px 宽内容 - 法二：使用缩放实现，对 1px 高度线条进行 0.5 倍缩放 - 法三：base64 编码实现 ```html title="index.html" <div class="line-container"> <div class="border_normal line-div"> 正常使用1px border效果（本DEMO请在移动端环境下查看） </div> <div class="border_gradient line-div"> 法一：使用渐变实现，使用两种颜色填充 1px 宽内容 </div> <div class="border_scale line-div"> 法二：使用缩放实现，对 1px 高度线条进行0.5倍缩放 </div> <div class="border_base64 line-div">法三：base64 编码实现</div> </div 使用drop-shadow配合clip-path生成规则阴影 https://zeroanon.com/interesting/rule-shadow https://zeroanon.com/interesting/rule-shadow Fri, 14 Mar 2025 19:30:00 GMT <RuleDropShadow /> 使用 drop-shadow 配合 clip-path 生成规则阴影。 使用 clip-path 可以很好的使用 SVG 的一些属性，绘制各种图形。绘制出来的图形如果希望带阴影，`box-shadow`  肯定是不行的，这个时候，`drop-shadow()`  则非常好用。 ```html title="index.html" <div class="btn-wrap"> <div class="btn">领取红包</div> </div> ``` ```scss .btn-wrap { margin: auto; filter: drop-shadow(2px 4px 3px rgba(50, 50, 0, 0.5)); } .btn { content: ""; width: 200px; height: 64px; line-height: 64px; text-align: center; background: linear-gradient(#f5e5bf, #fbe8c8, #f5e5 单标签纯css实现幽灵动画 https://zeroanon.com/interesting/ghost https://zeroanon.com/interesting/ghost Fri, 14 Mar 2025 17:30:00 GMT <GhostAnimation /> 单标签纯 CSS 实现幽灵动画。 - filter: blur() | filter: contrast() 的配合使用 - 单标签的限制，所以多重渐变也发挥了很重要的作用 ```html title="index.html" <div></div> ``` ```css title="styles.css" html, body { width: 100%; height: 100%; display: flex; background: #000; filter: blur(3px) contrast(10); div { position: relative; width: 80px; height: 120px; background: radial-gradient(circle at 60px 40px, #000, #000 7px, transparent 7px), radial-gradient(circle at 40px 40px, #000, #000 7px 小球穿梭放大loading动画 https://zeroanon.com/interesting/ball-loading https://zeroanon.com/interesting/ball-loading Fri, 14 Mar 2025 16:30:00 GMT <BallBlurLoading /> 小球穿梭放大 loading 动画。 主要使用了 blur、contrast 两个滤镜，它们的作用分别是： - filter: blur()： 给图像设置高斯模糊效果。 - filter: contrast()： 调整图像的对比度。 但是，当他们“合体”的时候，产生了奇妙的融合现象，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。 ```html title="index.html" <div class="g-container"> <div class="g-first"></div> <div class="g-ball"></div> <div class="g-ball"></div> <div class="g-ball"></div> <div class="g-ball"></div> <div class="g-ball"></div> <div class="g-ball"></div> <div class="g-ball"></div> </div> ``` box-shadow实现圆环进度条动画 https://zeroanon.com/interesting/circle-loading https://zeroanon.com/interesting/circle-loading Fri, 14 Mar 2025 16:30:00 GMT <CircleShadowLoading /> Box-shadow 实现圆环进度条动画。这个真的算是奇技淫巧。 - 圆环进度条的移动本质上是阴影顺序延时移动的结果。 ```html title="index.html" <div class="container"> <div class="shadow">Hover Me</div> </div> ``` ```css title="styles.css" :root { --color: #e91e63; } body { background: #000; } .container { position: relative; overflow: hidden; width: 124px; height: 124px; overflow: hidden; margin: 100px auto; border-radius: 50%; } .shadow { position: absolute; top: 50%; left: 50%; transform: 关于TypeScript https://zeroanon.com/blog/about-typescript https://zeroanon.com/blog/about-typescript Fri, 14 Mar 2025 10:26:00 GMT ## 一、提高开发效率的几个 TS 工具类型 ### 一、类型别名 TypeScript 提供了为类型注解设置别名的便捷语法，可以使用 type SomeName = someValidTypeAnnotation 来创建别名，比如： ```ts type Pet = "cat" | "dog"; let pet: Pet; pet = "cat"; // Ok pet = "dog"; // Ok pet = "zebra"; // Compiler error ``` ### 二、基础知识 先介绍一下相关的一些基础知识。 #### 2.1 typeof 在 TypeScript 中，`typeof` 操作符可以用来获取一个变量声明或对象的类型。 ```ts interface Person { name: string; age: number; } const sem: Person = { name: "semlinker", age: 30 }; type Sem = typeof sem; // type Sem = Person ``` 在 动画svg徽标 https://zeroanon.com/blog/animated-svg-logo https://zeroanon.com/blog/animated-svg-logo Mon, 10 Mar 2025 10:00:00 GMT 最近，我为网站左上角的徽标进行了一次改版，用动画 SVG 替换了原来的静态图标： <div className="flex items-center justify-center"> <Logo layout="default" /> </div> ## 灵感来源 一切要从 [antfu](https://antfu.me/posts/animated-svg-logo "--accent-pink") 的个人网站说起。第一次访问他的网站时，我被深深吸引了：「这才是我理想中的个人网站！」 特别是他那个充满设计感的签名体 logo，看过他的实现教程后，我也跃跃欲试。虽然尝试了很多次，但总是差强人意。 直到遇见了 [lxchapu](https://www.lxchapu.com/posts/make-a-beautify-animated-signature/) 的这篇文章，如获至宝！ 它完美解答了我的所有困惑。在此特别感谢这两位开发者的分享 🙏 ## 实现步骤 <!-- ::start:steps --> :::step 选择字体 首先访问 [Google Fo