共计 4517 个字符，预计需要花费 12 分钟才能阅读完成。
本文将持续更新那些炫酷交互成果系列文章，明天带来的是无关 toggle 开关相干的组件。以下是本次文章波及到的开关组件总览图，总计收集 12 款不同交互成果，置信总有一款适宜你。
那些你不晓得的炫酷交互成果系列：
- 那些你不晓得的炫酷按钮交互成果
- 那些你不晓得的炫酷导航交互成果
- 那些你不晓得的炫酷开关交互成果
成果 1
基于一般的开关成果减少了向外部延长的 3D 成果，外围是通过设置内暗影 box-shadow: inset 实现，除开对元素自身减少暗影，还设置了两个伪元素晋升 3D 成果，以下是外围实现代码：
label {
background: #af4c4c;
border: .5px solid rgba(117, 117, 117, 0.31);
box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.2), 0 -3px 4px rgba(0,0,0,0.15);
&::before {
border: none;
width: 40px;
height: 40px;
box-shadow: inset 0.5px -1px 1px rgba(0, 0, 0, 0.35);
background: #fff;
transform: rotate(-25deg);
}
&::after {
background: transparent;
height: calc(100% + 8px);
border-radius: 30px;
top: -5px;
width: calc(100% + 8px);
left: -4px;
z-index: 0;
box-shadow: inset 0px 2px 4px -2px rgba(0,0,0,0.2), 0px 1px 2px 0px rgba(151, 151, 151, 0.2);
}
}成果 2
这是一款极其简洁的成果，通明开关成果，整体只有红色的边框和一个红色的圆形平移管制开关的成果。这里波及到的代码绝对比较简单，就不再额定展现。
成果 3
这款成果的开关过程动画不再是简略的平移，交互上的两个状态层次分明，过渡的成果也挺有创意，整体动画成果能够拆分为以下几个局部：
- 色彩由绿色变为红色
- 挪动的块旋转一周
- 图标由 √ 变动为 ✕，图标用伪元素实现
外围代码局部：
/* 选中成果 */
#checkcross:checked + label {
.check {
left: 68px;
transform: rotate(360deg);
background: #c34a4a;
/* 图标变动 */
&:before {
width: 27px;
transform: rotate(-45deg) translate(-8px, 18px);
}
&:after {
width: 27px;
transform: rotate(45deg) translate(18px, 8px);
}
}
}成果 4
这是一款比拟有趣味的交互成果，两个状态之间的切换从一个饼到多个饼重叠的成果，在特定的场景中能够更换为其余的元素成果。外围的实现逻辑是默认只展现一个饼图，其余的通过 scale(0) 暗藏，并设定不同的定位坐标值，当状态发生变化时，设置 scale(1) 并减少不同的延时工夫，代码如下：
#pancake:checked {
+ label {
.pancakes {transform: translateX(70px);
}
.pancake {&:nth-child(2) {transform: scale(1);
transition-delay: .2s;
}
&:nth-child(3) {transform: scale(1);
transition-delay: .4s;
}
}
.butter {transform: scale(1);
transition-delay: .6s;
}
}
}成果 5
这也是一款比拟乏味的交互成果，整体动画也是和 #3 相似，挪动的过程采纳旋转一周切换状态。然而外围的圆形局部变成了一个卡通狗狗的成果，并且在开启状态后狗狗的表情产生了变动，减少了微笑吐舌头😝的成果，还动了一下耳朵。这两个成果也是基于 scale 实现，外围代码如下：
#doggo:checked {
+ label {
.dog {
left: 68px;
transform: rotate(360deg);
}
.mouth {transform: scale(1);
transition-delay: .7s;
}
.ear.right {transform: scaleX(-1) rotate(-35deg);
transition-delay: .6s;
}
}
}成果 6
这也是一款绝对简洁的成果，不同的是开关的圆形宽高会大于背景填充局部的宽高，造成一个反差成果，关上的动画过程也减少了贝塞尔曲线管制，而且在关上后减少了暗影放大的成果，加强了与用户交互的体验感。外围代码如下：
.checkbox-wrapper-3 #cbx-3:checked + .label span {
background: #4F2EDC;
transform: translateX(70px);
transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2);
}
/* 暗影放大成果 */
.checkbox-wrapper-3 #cbx-3:checked + .label span:before {transform: scale(1);
opacity: 0;
transition: all 0.4s ease;
}成果 7
这是一款带有可恶风的开关成果，通过减少突变背景色和暗影突出 3D 的成果，通过伪元素管制面部的表情，表情的变动过程也是极为活泼无力。因为这里在扭转表情的时候对整个元素减少了一个 Y 轴一周旋转，而且这里表情外面的眼睛和嘴所实现的伪元素都是基于 content 中的特殊符号实现，并没有通过背景色实现，外围代码如下：
.checkbox-wrapper-5 .check label::before {content: "· ·";}
.checkbox-wrapper-5 .check label::after {content: "●";}
input[type="checkbox"]:checked + label::after {transform: rotateY(360deg);
}成果 8
看了很多失常的来一个脱离外围圆形开关的成果，开关上有 ON/OFF 文字效果，但理论这也是两个伪元素，文字是通过标签中的自定义属性传递应用。动画的过程就是平移两个伪元素，伪元素的宽高和外层元素的宽高一样，所以状态变动时所挪动的间隔就是 100%。外围代码如下：
<label class="tgl-btn" data-tg-off="OFF" data-tg-on="ON"></label>css：
.tgl-btn:after {
left: 100%;
content: attr(data-tg-on);
}
.tgl-btn:before {
left: 0;
content: attr(data-tg-off);
}
.tgl-skewed:checked+.tgl-btn:after {left: 0;}
.tgl-skewed:checked+.tgl-btn:before {left: -100%;}成果 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);
}彩蛋
最初来个有所夸大的彩蛋开关成果，这个成果原则上曾经不是在开关组件性能层面了，然而还是能够看看具体的实现成果，有趣味的同学能够看看在线代码的源码实现过程。
在线预览
码上掘金在线成果预览：
https://code.juejin.cn/pen/71…
最初
本次整顿的 toggle 开关交互分享就完结了，心愿能够在你的我的项目中带来肯定的播种，如果你还有什么好的设计交互成果欢送留言探讨。前期还会持续整顿分享其余性能组件的优质设计交互成果，如果有什么冀望整顿的组件也欢送留言哈。
看完本文如果感觉有用，记得点个赞反对，珍藏起来说不定哪天就用上啦～
专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）