Twinkle_sone的博客

今天来实现一个水球进度加载动画效果，整体是一个球形容器，球顶不断有水滴滴落，随着水滴滴落，底部水位不断上升，水面上涨的同时伴随着波动的动画。

本文介绍了一种轮盘式可收起按钮的实现方法，主要适用于低频操作的按钮组。文章包含在线体验地址、代码实现细节和完整源码地址。核心实现包括：主按钮的360°旋转动画和文字切换效果（通过CSS伪元素实现）；子按钮的弹性展开动画（使用贝塞尔曲线）；动态生成子按钮并计算圆形布局位置（基于三角函数）。配置参数支持自定义半径、动画时长和缓动效果。源码已开源至Gitee/GitHub，欢迎Star和PR。

这篇文章介绍了如何使用纯CSS实现边框流光动画效果。作者通过CSS伪元素创建光带，利用动画控制其尺寸和位置变化，结合box-shadow实现发光效果。文章详细分解了动画的6个关键状态，展示了从圆形到四边边框的流动过程。还提供了调整发光强度和颜色的方法，并分享了源码地址和在线体验链接。该效果无需JavaScript，仅通过CSS动画即可实现，适合用于网页装饰元素。

摘要：本文实现了一个3D立体旋转轮播图，通过CSS3的transform-style和perspective属性创建3D效果，图片环绕中心点排列，支持左右切换、自动轮播和指示器导航。关键点包括： 使用CSS变量控制图片间距和3D景深 transform-origin设置旋转中心实现环绕效果 鼠标悬停放大图片并暂停轮播 通过JavaScript动态计算每张图片的旋转角度 添加弹性过渡动画增强交互体验 效果展示和完整代码可通过CodePen查看。

HTTP缓存机制解析 HTTP缓存通过存储已请求资源来优化性能，包含强制缓存和协商缓存两种策略。强制缓存通过Cache-Control头直接判断资源有效性，而协商缓存则通过ETag/Last-Modified标识与服务器验证资源更新状态。首次请求时服务器返回资源及缓存头信息，后续请求会优先检查本地缓存：有效则直接使用（200 from cache），过期则发送验证请求（304未修改时复用缓存，已修改则获取新资源）。合理配置缓存策略可显著减少网络传输，提升用户体验。文章通过Node.js示例演示了max-ag

作为一名开发，相信大家对于浏览器控制台都是不陌生的，平时页面一出问题第一反应总是先打开控制台看看报错信息，而且还可以在控制台里插入自己的脚本信息来修改页面逻辑，那么你有没有想过 怎么限制用户打开控制台 呢？

今天，有个朋友给我发了一串神秘的字符（ (!(~+[]) + {})[--[~+''][+[]] * [~+[]] + ~~!+[]] + ({} + [])[[~!+[]] * ~+[]] ），还要我在控制台打印一下试试

大家对于雷达图应该都不陌生了吧，比如龙珠中这个经典的龙珠雷达，今天让我们一起来看看怎么封装一个雷达图vue组件。

大家对于雷达图应该都不陌生了吧，比如龙珠中这个经典的龙珠雷达，今天让我们一起来看看怎么快速实现一个雷达图。

之前看剧习惯了看字幕，最近在b站看直播，有时候会觉得没有字幕有点不太习惯，所以突发奇想，能不能给b站直播加一个实时字幕？然后就写了这么一个插件。

前端开发中，当我们需要展示大量数据列表时，直接渲染所有数据项往往会导致性能问题，页面加载缓慢、滚动卡顿等。为了解决这一问题，虚拟列表技术应运而生。今天我们一起来简单实现一个虚拟滚动列表。

前端三件套实现一个雨点动画效果。

最近实现了一个b站语音助手插件，可以通过语音来控制播放页面上指定的视频，在语音识别的过程中遇到了一个问题：语音识别出来的文本是预设语音指令同音词，导致语音指令匹配不上。这个时候有两种解决方案：

微信的摇骰子表情包大家应该都玩过吧，今天我们也来尝试来简单实现一个摇骰子的功能。

最近实现了一个b站插件，可以通过语音来控制播放页面上指定的视频，在语音识别的过程中遇到了需要将中文数字转为阿拉伯数字的情况，在这里分享一下具体事例和处理过程。

微信里的@功能大家应该都用过了吧，那么有没有想过它是怎么实现的呢？今天我们就一起来简单实现一个带@功能的输入框组件。

不知道大家平时有没有遇到需要 获取输入框当前光标的前一个字符 的场景？今天让我们一起来看一下怎么实现这个功能。

都 2025 了，你的前端项目还是手动打包上传部署的吗？手动嫌麻烦，流水线不想搞，那就直接写个一键部署脚本吧，这里以 vue 项目为例，简单来实现一个一键部署脚本。

最近追剧的时候发现，现在很多视频平台都会在视频暂停的时候播放广告，并将播放的视频页面缩小到角落里，长视频平台的"暂停广告"似乎已成行业潜规则。那么这种“反人性的交互设计”功能是怎么实现的呢？

显示省份的中国地图大家应该都实现过了吧？那么显示全国所有城市的中国地图大家实现过吗？最近刚好自己在实现一个小功能需要显示全国所有城市的中国地图，在这里分享一下怎么快速实现一个。

🎈所谓的数据脱敏，是指在不影响数据分析结果的准确性前提下，对原始数据中的敏感字段进行处理，从而降低数据敏感度和减少个人隐私风险的技术措施。在现在这个大数据时代，个人隐私信息在互联网上传播的几率是很大的，因此作为前端工程师，我们很多时候也需要在视图层面对数据进行脱敏展示处理。

在短视频兴起的时代，很多的视频软件都有视频加速的功能，只需轻轻长按屏幕，视频便会根据预设的速度模式进行倍速播放，这是很常用而且很实用的一个功能，今天就让我们来简单实现一个组件，支持长按屏幕加速，且可以滑动选择加速倍率。

今年国庆假期前，A股市场的表现可谓“牛气冲天”。自9月24日“金融新政”出台后，A股迎来了连续五个交易日的强劲上涨势头。9月30日，沪深两市成交额仅在早盘开盘35分钟内便突破1万亿元，刷新了历史最快万亿成交纪录。身边也有挺多朋友趁着这个机会入市了，于是乎原本很多学习交流群都变成了股市交流群🤣🤣🤣，既然这么关注股价变化，为什么不写一个脚本来监控呢？

最近在做一个需求，需要在用户输入数字失焦后实时将数字转为大写中文，聚焦的时候将大写中文转为数字以便用户继续修改。这里我们可以封装一个通用指令来做转换，接下来就让我们一起来实现一个转换指令吧。

今天在看知乎的时候打开了控制台，发现其在初始化的时候会打印一张图片，这是怎么实现的呢？

JavaScript 中用 const 申明函数和直接用 function 哪个好？

🤯上一篇文章中我们制作了一个代码片段管理插件，但是用起来感觉有那么一点不顺手，如果将插入代码片段的功能改为代码自动补全提示来直接选择插入呢？这样用起来是不是就不一样了，今天我们就在代码片段管理插件的基础上实现一个通过代码片段库来自动补全提示的功能📑

🤯平时我们写代码的时候总是少不了cv，cv的时候还要先去找到旧的代码片段，然后将其复制过来，这样操作还是显得有些繁琐，针对这个问题，我们可以写一个代码片段保存复用 vscode 插件，支持同步代码片段到自己指定的 gitee 仓库，实现在不同电脑上 vscode 中共享代码片段📑

💡现在应该有很多前端同学都是使用的vscode来编写代码的吧？那么有没有试过自己编写一个vscode插件呢？今天我们一起来看看怎么编写一个vscode插件并配置一个右键多级菜单目录

🎈上拉加载更多的分页功能大家应该都见过或者使用过了吧？那么有多少同学自己实现过吗？今天我们来简单实现一个上拉加载更多分页组件。

当一个元素获取焦点时，通常会有一个视觉提示，比如输入框获得焦点时，边框可能会变色或者出现光标。这可以引导用户开始在该元素中进行操作，比如在网页表单的输入框中输入文本。例如，在一个登录页面中，当用户点击用户名输入框时，它获取焦点，光标出现，提示用户在此处输入用户名。

😶‍🌫️国庆过后，金价就大跳水，一直往下跌，看样子暂时是停不下来了，女朋友之前也入手了一点黄金，因此对黄金价格的变化比较关心，为了让她不用整天盯着实时金价，所以就搞了一个金价监控工具，超出设置的阈值就会发送邮件提醒✉。

不知道大家发布公众号文章用的是哪个排版工具呢？我这边使用的是`墨滴`，用起来体验感还是不错的，就是有一点让我觉得比较不习惯，正常写文章的时候应该有个目录可以查看会比较方便，比如掘金写文章的时候就可以查看文章目录，而墨滴是没有这个功能的，于是我便想着自己简单写一个插件来解决一下，给它加一个目录功能。

📖之前自己搞了个个人博客网站，但文章主要还是发布在掘金平台，没有同步发布到自己的个人博客网站上，现在就想着同步一下文章，所以首先我要先将自己在掘金的文章都导出到本地，导出后的文章可以备份到git上，也是后续同步到数据库的准备工作🧑‍💻

平时我们写代码处理的数据格式一般都是json格式的数据，有时候我们也需要将数据转为excel格式进行保存或分享，那么我们要怎么将json数据转为Excel呢？

平时工作中我们基本都会接触到excel数据表，但是在代码中使用和处理数据的时候通常都要将其转为json格式数据，那么我们怎么将Excel转为JSON数据呢？

现在大多数人都有自己的服务器，也会利用服务器搭建一些个人网站，那么有多少人会定时备份自己服务器的数据库数据呢？为了防止突发情况的发生，我们还是需要定时对自己数据库数据进行备份，今天我们一起来看看怎么使用node编写一个备份脚本，一键将数据备份到gitee和邮箱中。

在数据库管理和数据迁移的过程中，常常需要将数据库中的表数据和结构进行导出，以便进行备份、共享或在不同环境中使用。数据库数据备份的方法有很多，今天让我们用 Node.js 来编写一个脚本，快速从 MySQL 数据库中导出所有表的数据和结构，并保存为单独的 SQL 文件。

数组扁平化是指将一个嵌套数组转换为一个单层的数组。

在JavaScript中，`Object.is()`、`===`（严格相等操作符）和`==`（相等操作符）都用于比较两个值，但它们之间也存在一些区别。