本文将继续更新那些炫酷交互效果系列文章,今天带来的是有关 toggle 开关相关的组件。以下是本次文章涉及到的开关组件总览图,总计收集12款不同交互效果,相信总有一款适合你。
那些你不知道的炫酷交互效果系列:
- 那些你不知道的炫酷按钮交互效果
- 那些你不知道的炫酷导航交互效果
- 那些你不知道的炫酷开关交互效果
效果1
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
#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
#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
.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
.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
.switch-left {
transform: rotate(15deg) skewX(15deg);
}
input:checked + .switch-left {
transform: rotate(0deg) skewX(0deg);
}
效果11
.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
<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/7172092763444346892
最后
本次整理的toggle开关交互分享就结束了,希望可以在你的项目中带来一定的收获,如果你还有什么好的设计交互效果欢迎留言讨论。后期还会继续整理分享其他功能组件的优质设计交互效果,如果有什么期望整理的组件也欢迎留言哈。
看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~
专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)