Twinkle_sone的博客

常规的平面轮播图大家都看腻了吧，今天来实现一个有意思的 3D 立方体轮播图～

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

本文介绍了一种轮盘式可收起按钮的实现方法，主要适用于低频操作的按钮组。文章包含在线体验地址、代码实现细节和完整源码地址。核心实现包括：主按钮的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

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

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

520快到了，又到一年一度画爱心的时候了，今天一起来实现一个粒子爱心动画，说不定你可以用得上😁

在终端控制台打印字符图案我们见多了，那你有没有想过在控制台打印彩色图片呢？今天我们一起来看看怎么在终端控制台打印彩色图片。

最近突然想录制一些视频来分享一些代码，想在视频里展示代码编写的过程，但是又不想重头开始再敲一遍代码，所以便想着能不能写一个插件来帮我们“敲代码”🙂