范围选择
CSS+JS实现带有数值滑动切换效果的的滑块范围选择器为了创建一个带有数值滑动变化效果的范围滑块选择器（Range Slider with Sliding Value），用户拖动滑块时，值会以滑动变化的方式显示在滑块上方，这款效果是基于 CSS 和...
亮暗切换
CSS带滚动切换效果的简约暗亮主题开关按钮基于CSS实现的一款极简模式明亮黑暗切换按钮。这款切换按钮的手柄按钮和图标采用了类似混合模式的效果，按钮会随着交互的进行而滚动，而图标会随着交互进行旋转。其中的太阳河月亮小图标是通过SVG实现的...
主题切换
CSS+JS实现带有插图的亮暗主题切换按钮，可用在开关、主题切换、场景切换中一款带有额外插图细节的主题拨动开关按钮，通过按钮调节白天以及夜晚，按钮中通过SVG实现了代表白天的太阳和白云以及代表晚上的月亮和星星主题插图元素。基本的HTML结构为checkbox复选框，通过...
按钮切换
CSS创意合并字母切换按钮一款通过纯CSS实现的创意简约风格切换按钮，这款按钮的特色主要是开关的ON和OFF单词的切换效果，ON和OFF都有前面的O，这里让前面的按钮代表字母O，后面只有FF与N两个状态分别代表关和开...
拨动切换
CSS实现垂直翘板开关按钮，仿现实面板开关！通过CSS实现的一款特别精致的纵向翘板开关效果，通过鼠标可以拨动翘板开关已实现开关状态切换效果，当打开开关时翘板的下半部分会处于下按的状态并且有一个绿色的长条灯亮起，关闭开关时开关的上半部分处于...
开关按钮
HTML实现具有创意画圈过渡切换效果的开关按钮在HTML网页中通过CSS与JS实现的一款通过画圈动画的过渡方式切换开关的创意按钮，其中开状态使用的绿底色与柱状竖线图标表示，关状态使用红底色与粗圆圈⭕️表示，当点击按钮时，底层JS会响应点击...
妙招表单
HTML实现的创意表单，点击按钮扩展为表单，表单提交后恢复为按钮状态基于CSS与JS在HTML中实现按钮展开为表单以及表单提交后还原为按钮的创意表单效果。这种切换效果特别丝滑有创意，非常适合于文章资讯评论等互动网页中使用。
水果复选框
CSS橙子与蓝莓切换实现复选框切换效果通过纯CSS实现的通过单击切换蓝莓与橙子水果来实现开关切换或者复选框效果，实现方式其实是在checkbox复选框的基础上进行扩展实现的，CSS通过监测checked事件变换不同的水果形状。
倾斜面板
CSS实现响应式面板倾斜排列布局，附带悬停面板扩大效果使用 CSS 中的 Flexbox 布局结合变形（skew）变换实现了倾斜面板排列效果。默认是横向的排列布局，针对较小屏幕的设备，布局会自动调整为纵向布局，具有将强的自适应能力，并且在鼠标悬停时...
选中撒花
CSS单选框创意选项切换效果，点击选项出现撒花庆祝动画！通过CSS的keyframes及animation等关键属性实现的单选框切换选项动画效果，当选项被选中时显示撒花、撒纸屑庆祝动画效果，可用在单选框复选框以及其他按钮点击事件上，增加点击的趣味性。
糖果开关
CSS 创意棒棒糖开关切换按钮，切换次数越多糖果越小！一款超有创意的棒棒糖开关切换效果，底层就是checkbox，外观基于CSS实现了棒棒糖的切换按钮，通过多次的切换操作棒棒糖会因为「摩擦」而逐渐减小，下方是切换前后的对比图片。切换的事件效果是通过...