动态图标
CSS实现 Windows XP 关机动态图标，包含待机、关机以及重启三款动态图标经典操作系统 Windows XP 点击关机（"关闭计算机"）按钮后的动画演示，页面中总共包括关机、待机以及重启三种状态图标，这三款图标用过Win XP系统的用户再熟悉不过了，是基于SVG矢量图...
主题切换
基于纯CSS实现彩色纹理填充的明暗主题切换按钮这是一个明暗主题切换开关，利用CSS的 :has() 属性将常见内容变暗，而不是使用JavaScript，整体非常的轻量级。并且还基于SVG实现了代表亮色主题的太阳图标以及晚上暗色主题的月亮图标...
状态切换按钮
CSS平底锅煎蛋过程动画效果开关切换按钮假如煎蛋的过程可以当做切换按钮使用，你会不会很惊讶？今天就分享一款基于CSS动画实现的平底锅煎蛋来回翻滚效果搭配平底锅背景颜色的变化来实现切换按钮。其中JS负责切换事件，整体来看这是一款特别有创...
黑白翘板开关
CSS黑色与白色两款带指示灯的翘板波动切换开关按钮基于CSS实现的两款简约风格翘板开关切换按钮，分别是白色款以及黑色款，按钮带绿色的指示小灯，当打开状态时指示绿灯点亮，关闭状态时绿色指示灯关闭。底层通过纯CSS样式在checkbox基本样式的基...
亮暗切换
CSS带滚动切换效果的简约暗亮主题开关按钮基于CSS实现的一款极简模式明亮黑暗切换按钮。这款切换按钮的手柄按钮和图标采用了类似混合模式的效果，按钮会随着交互的进行而滚动，而图标会随着交互进行旋转。其中的太阳河月亮小图标是通过SVG实现的...
删除按钮
CSS带垃圾回收动画效果的创意删除按钮通过CSS实现的一款创意十足的删除按钮，一款普通的删除按钮都可以做出这么吸引人的动画效果一定会经验众人的。按钮上方有一个垃圾桶图标以及删除文案，点击删除按钮时，实现垃圾桶倾斜打开盖子，文案像垃圾...
浮雕按钮
CSS浮雕质感亮暗主题切换按钮通过纯CSS实现的一款干净的浮雕效果暗亮主题切换按钮，按钮的背景纹理呈现凹陷状态上方的按钮仿佛被雕刻上一样，按钮的两边有太阳和月亮图标分别代表亮色主题以及暗色主题，在切换的过程中背景也会配色做亮...
滚动开关
CSS创意圆柱体左右滚动开关按钮通过纯CSS实现的一款创意兼具趣味性的滚筒开关按钮，通过点击滚动实现开关或者其他相对状态的切换，圆柱体滚筒在不同的开关状态下呈现不一样的颜色。实现起来很简单，地下是HTML用到的部分代码，只需要...
登录表单
HTML+CSS实现的一款带图文推荐信息的登录表单布局页面一款通过CSS在HTML中实现的带图文推荐信息的登录注册表单，这款表单不仅拥有登录信息，还在侧面展示了图片以及文案结合的推荐或者广告信息，能够进一步促进网站的转化率。由于是响应式的布局，所以推荐...
主题切换
CSS+JS实现带有插图的亮暗主题切换按钮，可用在开关、主题切换、场景切换中一款带有额外插图细节的主题拨动开关按钮，通过按钮调节白天以及夜晚，按钮中通过SVG实现了代表白天的太阳和白云以及代表晚上的月亮和星星主题插图元素。基本的HTML结构为checkbox复选框，通过...
创意切换按钮
CSS带霓虹灯边框以及指示灯效果的开关切换按钮一款高颜值的带霓虹灯边框的开关切换按钮，并且还带有开关指示灯特别的有创意。当关闭状态时，是一个全黑炫酷按钮形态，左上方的指示灯为红灯，当打开开关时，黑色按钮的边框变为绿色，且左上方的绿色指示灯点...
按钮切换
CSS创意合并字母切换按钮一款通过纯CSS实现的创意简约风格切换按钮，这款按钮的特色主要是开关的ON和OFF单词的切换效果，ON和OFF都有前面的O，这里让前面的按钮代表字母O，后面只有FF与N两个状态分别代表关和开...