灯光按钮
CSS带触感及灯光效果的圆形开关按钮基于CSS实现的两款极简风格带灯关效果的圆形开关按钮，分别是白色以及黑色两款，点击按钮打开开关时有被按下去的下陷触感，并且按钮中心的灯关会亮起来，反之关闭开关时按钮有凸起的效果，并且按钮中心的...
铅笔绕圈
CSS趣味铅笔环形运动划线擦除动画Loading加载器一款趣味性十足的铅笔绕圈动画效果，这根铅笔尾部还带有橡皮，铅笔素材是由svg矢量图绘制的，而铅笔环绕运动画圈并使用橡皮擦出的动画效果是基于CSS实现的。这款铅笔动画特别适用于页面加载中Loadi...
动态自行车
CSS+SVG行驶中的自行车简笔画绘制过程动画效果，适用于Loading预加载器或者背景动画基于CSS+SVG创建一个自行车样式的预加载动画，其中自行车素材是通过SVG矢量图实现的，自行车的两个轮子以及链条都是由旋转的加载器组成的，并且整个动画展示了行驶中的自行车简笔画的落成过程及擦除...
圆环电池
CSS实现的圆环形电池电量指示计通过CSS实现的一款有趣的圆环电池电量计动画效果，由一个在圆环内伸展的电池组成，带有正负极标识，并且在电量低于10%、10%-20%以及大于20%区间都会有不同的颜色体现以显示电池健康状况。底部...
胶囊加载器
CSS仿真胶囊药丸浮动旋转Loading加载器效果一款带阴影效果的胶囊药丸💊有节奏的上下运动并伴随着旋转效果。是基于纯CSS实现的，非常适用于页面Loading加载期间使用。非常的轻量级只需要少量的CSS代码即可实现。
磨砂图标
CSS磨砂玻璃背景拟物化（Skeuomorphic）风格菱形水晶玻璃刻字效果Logo图标基于纯 CSS 实现的一款磨砂玻璃背景拟物化（Skeuomorphic）风格菱形图标，菱形图标由四个小菱形组合聚合到一起组成。仿佛是在塑料玻璃方块上雕刻出的图标一样，将这个图标陈列在木质板上...
加载效果
CSS实现的 Neumorphism（新拟物风格）加载指示器动画效果基于CSS创建了一个 Neumorphic 风格的加载动画，结合锥形渐变（conic-gradient）和 CSS 的其他重要变量，可以实现一个既美观又现代的效果。Neumorphic 风格强调...
动态图标
CSS实现 Windows XP 关机动态图标，包含待机、关机以及重启三款动态图标经典操作系统 Windows XP 点击关机（"关闭计算机"）按钮后的动画演示，页面中总共包括关机、待机以及重启三种状态图标，这三款图标用过Win XP系统的用户再熟悉不过了，是基于SVG矢量图...
主题切换
基于纯CSS实现彩色纹理填充的明暗主题切换按钮这是一个明暗主题切换开关，利用CSS的 :has() 属性将常见内容变暗，而不是使用JavaScript，整体非常的轻量级。并且还基于SVG实现了代表亮色主题的太阳图标以及晚上暗色主题的月亮图标...
状态切换按钮
CSS平底锅煎蛋过程动画效果开关切换按钮假如煎蛋的过程可以当做切换按钮使用，你会不会很惊讶？今天就分享一款基于CSS动画实现的平底锅煎蛋来回翻滚效果搭配平底锅背景颜色的变化来实现切换按钮。其中JS负责切换事件，整体来看这是一款特别有创...
黑白翘板开关
CSS黑色与白色两款带指示灯的翘板波动切换开关按钮基于CSS实现的两款简约风格翘板开关切换按钮，分别是白色款以及黑色款，按钮带绿色的指示小灯，当打开状态时指示绿灯点亮，关闭状态时绿色指示灯关闭。底层通过纯CSS样式在checkbox基本样式的基...