8种选项开关的切换特效

一款8种选项开关的切换特效代码，每种特效的动画样式都不同，样式的形状大小、颜色、字体等均可以自由调整，适用于表单里的选项开关等场景，喜欢的童鞋请收下吧。

分类：选项卡/滑动门 > 选项卡切换难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，设置好各个选项开关的样式效果，部分代码如下：

body {
  font-size: 62.5%;
  background-color: #fff;
  margin: 0;
  border: 1px solid #333;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1, h2, h3 {
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  text-transform: uppercase;
}

h1 {
  font-size: 2.4em;
  background-color: #292929;
  text-align: center;
  padding: 20px;
  margin: 0;
  color: #fff;
}
h1 a {
  display: block;
  margin-top: 10px;
  text-transform: none;
  color: #aaa;
  font-size: 16px;
  text-decoration: none;
}

.headingOuter {
  background: #f1f1f1;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 0;
  padding: 10px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  font-size: 1.6em;
}
.headingOuter:first-child {
  margin-top: 0;
}
h1 + .headingOuter {
  margin-top: 0;
}

/* =====================================================
   演示样式
   ===================================================== */
.toggle {
  display: block;
  text-align: center;
  margin-top: 40px;
  user-select: none;
}

.toggle--checkbox {
  display: none;
}

.toggle--btn {
  display: block;
  margin: 0 auto;
  font-size: 1.4em;
  transition: all 350ms ease-in;
}
.toggle--btn:hover {
  cursor: pointer;
}

.toggle--btn, .toggle--btn:before, .toggle--btn:after,
.toggle--checkbox,
.toggle--checkbox:before,
.toggle--checkbox:after,
.toggle--feature,
.toggle--feature:before,
.toggle--feature:after {
  transition: all 250ms ease-in;
}
.toggle--btn:before, .toggle--btn:after,
.toggle--checkbox:before,
.toggle--checkbox:after,
.toggle--feature:before,
.toggle--feature:after {
  content: '';
  display: block;
}

/* ===================================================
   白天黑夜的切换开关
   =================================================== */
.toggle--daynight .toggle--btn,
.toggle--like .toggle--btn {
  position: relative;
  height: 70px;
  width: 125px;
  border-radius: 70px;
}
.toggle--daynight .toggle--btn:before,
.toggle--like .toggle--btn:before {
  position: absolute;
  top: 2px;
  left: 4px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.toggle--daynight .toggle--btn {
  border: 5px solid #1c1c1c;
  background-color: #3c4145;
}
.toggle--daynight .toggle--btn:before {
  background-color: #fff;
  border: 5px solid #e3e3c7;
}
.toggle--daynight .toggle--btn:after {
  position: absolute;
  top: 62%;
  left: 39px;
  z-index: 10;
  width: 11.2px;
  height: 11.2px;
  opacity: 0;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: #fff 0 0, #fff 3px 0, #fff 6px 0, #fff 9px 0, #fff 11px 0, #fff 14px 0, #fff 16px 0, #fff 21px -1px 0 1px, #fff 16px -7px 0 -2px, #fff 7px -7px 0 1px, #d3d3d3 0 0 0 4px, #d3d3d3 6px 0 0 4px, #d3d3d3 11px 0 0 4px, #d3d3d3 16px 0 0 4px, #d3d3d3 21px -1px 0 5px, #d3d3d3 16px -7px 0 1px, #d3d3d3 7px -7px 0 5px;
  transition: opacity 100ms ease-in;
}
@keyframes starry_star {
  50% {
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: #fff 30px -3px 0 0, #fff 12px 10px 0 -1px, rgba(255, 255, 255, 0.1) 38px 18px 0 1px, #fff 32px 34px 0 0, rgba(255, 255, 255, 0.1) 20px 24px 0 -1.5px, #fff 5px 38px 0 1px;
  }
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 100;
    transform: scale(1.1);
  }
  55% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    opacity: 100;
    transform: scale(1);
  }
}
.toggle--daynight .toggle--feature {
  display: block;
  position: absolute;
  top: 9px;
  left: 52.5%;
  z-index: 20;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 0, rgba(255, 255, 255, 0.1) 12px 10px 0 -1px, #fff 38px 18px 0 1px, rgba(255, 255, 255, 0.1) 32px 34px 0 0, #fff 20px 24px 0 -1.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 1px;
  animation: starry_star 5s ease-in-out infinite;
}
.toggle--daynight .toggle--feature:before {
  position: absolute;
  top: -2px;
  left: -25px;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 50%;
  border: 5px solid #e3e3c7;
  box-shadow: #e3e3c7 -28px 0 0 -3px, #e3e3c7 -8px 24px 0 -2px;
  transform-origin: -6px 130%;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn {
  background-color: #9ee3fb;
  border: 5px solid #86c3d7;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn:before {
  left: 55px;
  background-color: #ffdf6d;
  border: 5px solid #e1c348;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn:after {
  opacity: 100;
  animation-name: bounceIn;
  animation-duration: 0.60s;
  animation-delay: 0.10s;
  animation-fill-mode: backwards;
  animation-timing-function: ease-in-out;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature {
  opacity: 0;
  box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 -4px, rgba(255, 255, 255, 0.1) 12px 10px 0 -5px, #fff 38px 18px 0 -3px, rgba(255, 255, 255, 0.1) 32px 34px 0 -4px, #fff 20px 24px 0 -5.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 -3px;
  animation: none;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature:before {
  left: 25px;
  transform: rotate(70deg);
}

页面的body部分，多个div容器里分别放入不同的input和label标签，代码如下：

<h1>8种选项开关的切换特效 <a href="http://www.sucaihuo.com" target="blank">@Richer</a></h1>
<h2 class="headingOuter">白天黑夜</h2>
<div class="toggle toggle--daynight">
	<input type="checkbox" id="toggle--daynight" class="toggle--checkbox">
	<label class="toggle--btn" for="toggle--daynight"><span class="toggle--feature"></span></label>
</div>

<h2 class="headingOuter">开不开心</h2>
<div class="toggle toggle--like">
	<input type="checkbox" id="toggle--like" class="toggle--checkbox">
	<label class="toggle--btn" for="toggle--like"><span class="toggle--feature"></span></label>
</div>

<h2 class="headingOuter">阴影特效</h2>
<div class="toggle toggle--text">
	<input type="checkbox" id="toggle--text" class="toggle--checkbox">
	<label class="toggle--btn" for="toggle--text" data-label-on="开"  data-label-off="关"></label>
</div>

<h2 class="headingOuter">立体开关</h2>
<div class="toggle toggle--push">
	<input type="checkbox" id="toggle--push" class="toggle--checkbox">
	<label class="toggle--btn" for="toggle--push" data-label-on="on"  data-label-off="off"></label>
</div>
<div class="toggle toggle--push toggle--push--glow">
	<input type="checkbox" id="toggle--push--glow" class="toggle--checkbox">
	<label class="toggle--btn" for="toggle--push--glow" data-label-on="on"  data-label-off="off"></label>
</div>

<h2 class="headingOuter">物理开关</h2>
<div class="toggle toggle--knob">
	<input type="checkbox" id="toggle--knob" class="toggle--checkbox">
	<label class="toggle--btn" for="toggle--knob"><span class="toggle--feature" data-label-on="开"  data-label-off="关"></span></label>
</div>

<h2 class="headingOuter">滑动开关</h2>
<div class="toggle toggle--switch">
	<input type="checkbox" id="toggle--switch" class="toggle--checkbox">
	<label class="toggle--btn" for="toggle--switch"><span class="toggle--feature" data-label-on="开"  data-label-off="关"></span></label>
</div>

<h2 class="headingOuter">霓虹开关</h2>
<div class="toggle toggle--neon">
	<input type="checkbox" id="toggle--neon" class="toggle--checkbox">
	<label class="toggle--btn" for="toggle--neon" data-label-on="开"  data-label-off="关"></label>
</div>