> 本文正在参加「金石计划 . 瓜分6万现金大奖」。 通过本文，你将学到: html css js 没错，就是html，css,js,现在是框架盛行的时代，所以很少会有人在意原生三件套，通过本文实现一

纯CSS通过自定义样式，借助:checked伪类实现switch开关效果的按钮。 为了便于修改和调节，使用了css变量控制按钮的大小。并添加属性变化的动画效果...

最近经常看到很多JavaScript手写代码的文章总结，里面提供了很多JavaScript Api的手写实现。 里面的题目实现大多类似，而且说实话很多代码在我看来是非常简陋的，如果我作为面试官，看到这样的代码，在我心里是不会合格的，本篇文章我拿最简单的深拷贝来讲一讲。 本文由浅…

暗黑模式是网站颇受欢迎的功能，用 HTML、CSS、JS 即可实现。但为什么你没有在你的个人网站实现暗黑功能呢？只要这简单的三个步骤，你就可以拥有暗黑模式。实操开始！（译：并不是所有的人都会 CSS，所以这是为什么我会翻译本文的原因，它真的超简单！） 如果你还没有个人网站，先简…

最近把 blog 右上角的黑暗模式切换按钮重写了一下，为此还学了学 Figma，虽然技术不难，但是收获颇多，至少自己可以照猫画虎设计一些简单的 SVG 图形了， 废话不多说，下边我介绍一下我是怎样使用

本文正在参加「金石计划 . 瓜分6万现金大奖」。 众所周知，函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。 举个例子：一个保存按钮，为了避免重复提交

你知道当一个人的头像从一个圆圈或洞里伸出来时的那种效果吗？本文将使用一种很简洁的方式实现该悬停效果，只用了一个img元素和不到20行的CSS技巧实现一个炫酷的头像悬停效果

技术上没太大难度，有难度的地方是怎么让整个动画比较流畅。一个主要问题是动画的滞后性：当下载进度到某个点的时候，你再用250ms的动画过渡过去，这个时候已经慢了，所以很多人可能因为这个原因或者嫌麻烦，直接就不做动画了，在进度事件触发的时候直接更新进度条相应的位置，不过我们可以尝试…