效果9
这也是一款较为生动的交互效果，状态从白天到黑夜的效果，比较适用于页面主题切换时使用。在切换的过程也增加了transition过渡，使整个过程较为柔和，核心的部分是由太阳切换到月亮的过程，太阳则是由linear-gradient线性渐变完成，月亮则是由纯黑色的背景和box-shadow配合border-radius实现，核心代码如下：
.slider:before { border-radius: 20px; background: linear-gradient(40deg,#ff0080,#ff8c00 70%); transition: .4s; } input:checked + .slider:before { background: #303136; box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb; }
效果10
这是一款类似生活中使用的按钮开关效果，有按下弹起的效果，这里使用了rotate和skew两种变形使按钮有弹起的效果，切换的过程也增加了transition过渡效果。核心部分代码如下：
.switch-left { transform: rotate(15deg) skewX(15deg); } input:checked + .switch-left { transform: rotate(0deg) skewX(0deg); }
效果11
上面的按钮中有YES/NO的文字显示，这一款则是将文字和圆形开关两者结合在了一起，动画中也的文字和圆形元素都增加了贝塞尔曲线的效果，给用户操作体验增加了生动的感觉。核心代码如下：
.tgl-ios + .tgl-btn:after { transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); } .tgl-ios + .tgl-btn:before { transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
效果12
最后来一个纯文本类型的翻转切换效果，文本内容也是通过标签自定义属性传递到伪元素中，开关翻转效果则是通过设置旋转Y轴rotateY(-180deg)实现。核心代码如下：
<label class="tgl-btn" data-tg-off="Nope" data-tg-on="Yeah!"></label>
.tgl-flip + .tgl-btn:before { background: #FF3A19; content: attr(data-tg-off); } .tgl-flip + .tgl-btn:active:before { transform: rotateY(-20deg); } .tgl-flip:checked + .tgl-btn:before { transform: rotateY(180deg); }
#彩蛋
最后来个有所夸张的彩蛋开关效果，这个效果原则上已经不是在开关组件功能层面了，但是还是可以看看具体的实现效果，有兴趣的同学可以看看在线代码的源码实现过程。
在线预览
码上掘金在线效果预览：code.juejin.cn/pen/7172092…
最后
本次整理的toggle开关交互分享就结束了，希望可以在你的项目中带来一定的收获，如果你还有什么好的设计交互效果欢迎留言讨论。后期还会继续整理分享其他功能组件的优质设计交互效果，如果有什么期望整理的组件也欢迎留言哈。
看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～
