飞行模式切换
CSS+JS带飞机起飞和降落动画的飞行模式切换图标按钮在切换飞行模式时，能够观看到小飞机的起飞和降落动画会不会很炫酷？当前这款基于CSS和JS技术实现的切换按钮就带有飞机起飞、环绕飞行最终降落的动画效果。并且按钮带有颜色切换以及触感。非常适合于飞...
灯光按钮
CSS带触感及灯光效果的圆形开关按钮基于CSS实现的两款极简风格带灯关效果的圆形开关按钮，分别是白色以及黑色两款，点击按钮打开开关时有被按下去的下陷触感，并且按钮中心的灯关会亮起来，反之关闭开关时按钮有凸起的效果，并且按钮中心的...
博克斯
Tailwind CSS现代化简约风格在线个人全方位展示网站模板，包含单页与多页两种风格「博克斯」是一款基于Tailwind CSS框架的现代化简约风格个人作品集 HTML 模板，专为设计师、开发者、自由职业者等个人网站设计。该模板提供单页布局以及多页布局两种布局风格，并提供了9种...
鸭蛋壳
供设计师、程序员及其他自由职业者专用的个人网站及作品展示平台专用Bootstrap模板「鸭蛋壳」是一款专为设计师、自由职业者、艺术家及各类创意人士打造的尖端 HTML 模板，旨在帮助用户展示个人作品并提升品牌形象。基于主流的前端框架Bootstrap5x进行构建，支持亮暗主题模式...
主题切换
基于纯CSS实现彩色纹理填充的明暗主题切换按钮这是一个明暗主题切换开关，利用CSS的 :has() 属性将常见内容变暗，而不是使用JavaScript，整体非常的轻量级。并且还基于SVG实现了代表亮色主题的太阳图标以及晚上暗色主题的月亮图标...
状态切换按钮
CSS平底锅煎蛋过程动画效果开关切换按钮假如煎蛋的过程可以当做切换按钮使用，你会不会很惊讶？今天就分享一款基于CSS动画实现的平底锅煎蛋来回翻滚效果搭配平底锅背景颜色的变化来实现切换按钮。其中JS负责切换事件，整体来看这是一款特别有创...
黑白翘板开关
CSS黑色与白色两款带指示灯的翘板波动切换开关按钮基于CSS实现的两款简约风格翘板开关切换按钮，分别是白色款以及黑色款，按钮带绿色的指示小灯，当打开状态时指示绿灯点亮，关闭状态时绿色指示灯关闭。底层通过纯CSS样式在checkbox基本样式的基...
亮暗切换
CSS带滚动切换效果的简约暗亮主题开关按钮基于CSS实现的一款极简模式明亮黑暗切换按钮。这款切换按钮的手柄按钮和图标采用了类似混合模式的效果，按钮会随着交互的进行而滚动，而图标会随着交互进行旋转。其中的太阳河月亮小图标是通过SVG实现的...
浮雕按钮
CSS浮雕质感亮暗主题切换按钮通过纯CSS实现的一款干净的浮雕效果暗亮主题切换按钮，按钮的背景纹理呈现凹陷状态上方的按钮仿佛被雕刻上一样，按钮的两边有太阳和月亮图标分别代表亮色主题以及暗色主题，在切换的过程中背景也会配色做亮...
滚动开关
CSS创意圆柱体左右滚动开关按钮通过纯CSS实现的一款创意兼具趣味性的滚筒开关按钮，通过点击滚动实现开关或者其他相对状态的切换，圆柱体滚筒在不同的开关状态下呈现不一样的颜色。实现起来很简单，地下是HTML用到的部分代码，只需要...
主题切换
CSS+JS实现带有插图的亮暗主题切换按钮，可用在开关、主题切换、场景切换中一款带有额外插图细节的主题拨动开关按钮，通过按钮调节白天以及夜晚，按钮中通过SVG实现了代表白天的太阳和白云以及代表晚上的月亮和星星主题插图元素。基本的HTML结构为checkbox复选框，通过...
创意切换按钮
CSS带霓虹灯边框以及指示灯效果的开关切换按钮一款高颜值的带霓虹灯边框的开关切换按钮，并且还带有开关指示灯特别的有创意。当关闭状态时，是一个全黑炫酷按钮形态，左上方的指示灯为红灯，当打开开关时，黑色按钮的边框变为绿色，且左上方的绿色指示灯点...