关键词：
本文将继续更新那些炫酷交互效果系列文章，今天带来的是有关 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类似，移动的过程采用旋转一周切换状态。但是核心的圆形部分变成了一个卡通狗狗的效果，并且在开启状态后狗狗的表情发生了变化，增加了微笑吐舌头
pyecharts绘制20钟不同风格的炫酷交互式图表，建议收藏(代码片段)
作者|俊欣来源|关于数据分析与可视化今天小编来给大家介绍一下如何在Pyecharts当中画出炫酷的图表，通过该模块当中的一系列设置，本文我们大致会介绍pyecharts当中的Theme图表背景Pyecharts模块内部内置了10多种不同风格... 查看详情
那些炫酷的css文字效果之诗词《兔》(代码片段)
不知不觉已经迈入2023年，今年是兔年，想到兔子就会联想到玉兔，中秋，胡萝卜，兔子不吃窝边草，这就越扯越远了，今天的主题是用纯CSS来实现各种不错的文字效果，文字则摘录古诗词中有关《兔》相关的诗词，让我们一边... 查看详情
那些你不知道的css自定义形状网格布局3(代码片段)
基于CSS自定义网格已发布第一部分和第二部分，本文将开始第三部分探讨更多的奇特自定义形状，与之前的文章一样，核心还是基于CSSgrid，clip和mask来自定义网格形状布局。三部分文章不一定要按照顺序阅读，之间没有强制的关... 查看详情
手把手教你做一个python+matplotlib的炫酷的数据可视化动图(代码片段)
1.效果图 2.注意：上述资料是虚拟的，为了学习制作动图，构建的。仅供学习，不是真实数据，请别误传。当自己需要对真实数据进行可视化时，可进行适当修改。 3.代码：#第1步：导出模块，固定importpandasaspdimportmatplotli... 查看详情
四个复制就能用的炫酷网页特效(代码片段)
第一个：炫酷星空<!DOCTYPEHTML><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>运营系统登录页</title><linkh 查看详情
字符串，那些你不知道的事(代码片段)
Everythingyouthoughtyouknewaboutstringsiswrong.也许你会诧异，字符串有什么难的，即便遇到乱码的情况随便Google下就能找到解决方法，但是这样你不觉得有种被动的感觉嘛，我觉得和学习任何东西一样，学习编程首要是学习其思想，... 查看详情
那些你不知道的kotlin冷知识(代码片段)
Lambda表达式Lambda固然好用，但是你知道Kotlin是如何实现的吗？kotlin代码funfoo(item:Int)=print(item)转换为java字节码@NotNullpublicfinalFunction0foo(finalintitem)return(Function0)(newFunction0()//$FF:syntheticm 查看详情
springcloudzuul那些你不知道的功能点(代码片段)
本文摘自于《SpringCloud微服务入门实战与进阶》一书。1./routes端点当@EnableZuulProxy与SpringBootActuator配合使用时，Zuul会暴露一个路由管理端点/routes。借助这个端点，可以方便、直观地查看以及管理Zuul的路由。将所有端点都暴露出来... 查看详情
用python-myqr参数制作自己的炫酷二维码(代码片段)
1.下载myqr库在Python3环境下，输入如下指令：pipinstallmyqr等到提示下载成功就可以了2.导入myqr库打开pycharm的file-setting-PythonInterpreter在打开的界面中点击+号，搜索MyQr，选中第一个，点击左下角的installPackage下载好啦，安装成功，现... 查看详情
纯css实现那些超炫酷的动画效果(代码片段)
前言现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，那其实大家看到的动画其实很大一部分都是通过js或者插件实现的，但你知道吗，我们所熟知的css就可以制作炫酷的动... 查看详情
只要10分钟，搭建属于个人的炫酷网站，你还在犹豫什么？(代码片段)
💂个人主页:IT学习日记🤟版权:本文由【IT学习日记】原创、在CSDN首发、需要转载请联系博主💬如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦💅想寻找共同成长的小伙伴，请点击【技... 查看详情
css3css3动画——我离前端的炫酷又近了一步(代码片段)
【CSS3】CSS3动画——我离前端的炫酷又近了一步博客说明文章所涉及的部分资料来自互联网整理，当然还有自己个人的总结和看法，分享的目的在于共建社区和巩固自己。引用的资料如有侵权，请联系本人删除！... 查看详情
你不知道的js系列(12)－声明提升(代码片段)
我们直觉上会认为JavaScript代码在执行时是由上到下一行一行执行的。但实际这并不完全正确 a=2;vara;console.log(a);这里可能会认为是undefined，因为vara声明在a=2之后。实际输出了2。 console.log(a);vara=2;鉴于上面的代码可能会是2... 查看详情
整活小能手！windows系统滑动关机！一行脚本实现炫酷效果(代码片段)
...果通过一个脚本，在电脑PC端Windows电脑实现滑动关机的炫酷效果 事情是这样的感觉C站高手云集ÿ 查看详情
vue.use内部那些你不知道的事儿(代码片段)
1.Vue.use的作用Vue.use的作用是注册全局插件强化Vue的功能 它也可以用来注册全局组件但是有一个条件注册的对象中必须提供 install 方法。如果插件是一个函数，它会被作为install方法。install方法调用时，会将Vue作为参数... 查看详情
你不知道的线程池构造方法的那些趣事？(代码片段)
（手机横屏看源码更方便）注：java源码分析部分如无特殊说明均基于java8版本。简介ThreadPoolExecutor的构造方法是创建线程池的入口，虽然比较简单，但是信息量很大，由此也能引发一系列的问题，同样地，这也是面试中经常被问... 查看详情
万字长文！unix和linux你不知道的那些历史（详解版）(代码片段)
作者|程序员小乐来源|程序员小乐（ID:study_tech）00前言UNIX与Linux之间的关系是一个很有意思的话题。在目前主流的服务器端操作系统中，UNIX诞生于20世纪60年代末，Windows诞生于20世纪80年代中期，Linux诞生于20世纪90年代初... 查看详情
three.js网页中的炫酷3d(代码片段)
web3d一、前言粒子特效二维漫画可视化后期处理二、项目使用流程2.1项目结构2.2基本使用2.3项目模板2.4技术栈三、基础动画3.1THREE.Clock3.2GASP四、照相机8.1正交相机8.2透视相机4.3相机控制器五、画布和全屏六、几何体七、DebugUI八、... 查看详情