Blog - ZeroAnon https://zeroanon.com 博客订阅 zh-CN Thu, 23 Apr 2026 00:00:07 GMT <![CDATA[Projects]]> https://zeroanon.com/projects https://zeroanon.com/projects Thu, 23 Apr 2026 00:00:07 GMT <![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 能做什么 目前插件主要围绕以下几类场景展开： - **当前网页二维码生成**：打开首页即可为当前网页生成二维码，支持自定义内容与下载。 - **二维码工坊**：进一步生成更精致的二维码和分享海报，支持历史记录、多方案保存与回看。 - **JSON 工具箱**：支持格式]]> <![CDATA[关于Mysql的一些笔记]]> https://zeroanon.com/blog/mysql https://zeroanon.com/blog/mysql Thu, 02 Apr 2026 10:26:00 GMT 前面说过，我最近在写一个网站，后端以前一点都不会，所以现在从零开始学习 ，主要先学习PHP, phpThink,phpStorm,mysql 今天记一下mysql的一些小知识点： # 关于SQL语句的分类 > sql语句有好多，最好分门别类，这样容易记忆 ```js DQL: 数据查询语言 (凡是带有select关键字的都是查询语句) selsect... ``` ```js DML: 数据操作语言 (凡是对表当中的数据进行增删改的都是DML) insert 增 delete 删 updata 改 ``` ```js DML: 数据操作语言 (DDL主要操作的是表的结构，不是表的数据，例如删除列) create 新建 等同于增 drop 删除 alter 修改 ``` ```js TCL: 事务控制语言 事务提交： commit 事务回滚： rollback ``` ```js DCL: 数据控制语言 grant 授权 revoke 撤销授权 ``` # 一些命令 - 导入]]> <![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
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 <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> ``` ```css .line 使用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 <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, #f5e5bf); color: #be94 单标签纯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 <div></div> ``` ```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, transparent 7px), radial-gradien 小球穿梭放大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 <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> ``` ```css --count: 7; 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 <div class="container"> <div class="shadow">Hover Me</div> </div> ``` ```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: translate(-50%, -50%); width: 120px; 关于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 isPosition={false} /> </div> ## 灵感来源 一切要从 [antfu](https://antfu.me/posts/animated-svg-logo) 的个人网站说起。第一次访问他的网站时，我被深深吸引了：「这才是我理想中的个人网站！」 特别是他那个充满设计感的签名体 logo，看过他的实现教程后，我也跃跃欲试。虽然尝试了很多次，但总是差强人意。 直到遇见了 [lxchapu](https://www.lxchapu.com/posts/make-a-beautify-animated-signature/) 的这篇文章，如获至宝！ 它完美解答了我的所有困惑。在此特别感谢这两位开发者的分享 🙏 ## 实现步骤 ### 1. 选择字体 首先访问 [Google Fonts](https://fonts.google.com/)，在筛选器中选 何时葡萄先熟透，你要静候再静候 https://zeroanon.com/myself/for-me https://zeroanon.com/myself/for-me Wed, 05 Feb 2025 03:00:00 GMT 《致自己》 亲爱的林寒： "何时葡萄先熟透，你要静候再静候。"初看这个话题，颇有触动。于是在2025年2月3日晚，想要提笔写下点什么。 满心踌志入社会，终成社会小牛马。 终于到了小时候想要成为的年纪，可是没有成为小时候想要成为的那个人。或者说我成了那个普通的人，只是小时候对长大有滤镜，我并没有成为小时候那个"意气风发"的大人。 在快餐的时代，我们的年纪就像那颗葡萄，在还没有足够的条件和成熟时机，我们开始焦虑，着急到底什么时候开花结果。 可是啊，朋友，请静候再静候。有人三分钟煮面，也有人三小时煲汤。在同样的年龄，有人读书深造，有人努力赚钱，有人结婚生子......永远不要美化你没走的那条路。当下拥有的就是最好的。每个人都有自己的生活节奏，而我在自己的时空里刚刚好。累了就歇歇脚，有劲了就向前跑。 这年，我在和自己"碰撞"。 在这个"利己主义"思想盛行的年代，吃亏不再是福，"本色"和"让利"一旦形成习惯，遇到良人是"情商高"。如若不是，你的付出只会是别人眼中的"理所当然"。 当我的"本性"与"人性"发生冲撞时，我在思考性本善还是性本恶。几千年前都没被道家法家儒家争辩出结果的议 关于使用微信SDK https://zeroanon.com/blog/use-wechat-sdk https://zeroanon.com/blog/use-wechat-sdk Sat, 31 Aug 2024 16:50:00 GMT 最近，在开发微信H5的过程中，需要使用微信的SDK来实现一些功能，比如获取定位、拍照等。本文将介绍如何使用微信SDK，以及一些常见的坑和解决方案。 ## 微信SDK简介 微信SDK是微信官方提供的一套开发工具包，可以帮助开发者快速接入微信的功能，比如分享、支付、登录等。微信SDK提供了丰富的API，可以满足大部分开发需求。 ## 如何使用微信SDK [JS-SDK说明文档](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html) ### 1. 注册微信开放平台账号 首先，需要在微信开放平台注册一个账号，并创建一个应用。在创建应用时，需要填写一些基本信息，比如应用名称、应用类型等。 ### 2. 下载微信SDK 在微信开放平台创建应用后，可以下载微信SDK。微信SDK提供了多种语言版本，包括Java、PHP、Python等。根据你的项目需求，选择合适的语言版本下载。 ```sh pnpm add weixin-js-sdk -S ``` ### 3. 集成微信SDK 下载微 关于使用nuxt3+tailwindcss搭建工程 https://zeroanon.com/blog/build-the-nuxtv3-project https://zeroanon.com/blog/build-the-nuxtv3-project Tue, 20 Aug 2024 16:30:00 GMT 时隔一个月，终于完成了公司官网的重构，这次重构使用的是nuxt3+tailwindcss，结合tailwindcss的响应式断点完成项目的自适应布局，其中也遇到了很多问题，这个后面慢慢说，今天主要记录一下如何搭建一个nuxt3+tailwindcss的项目 ## 创建 Nuxt3 应用 ```npx npx nuxi@latest init <project-name> ``` ```yarn yarn dlx nuxi@latest init <project-name> ``` ### 踩坑1: 在墙内的同学，应该都会由于网络原因而失败 ## 最简洁的项目目录结构 ![](https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/6316e991cd114d72a7f001c844b29f03~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTGluSGFu:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMjY3