全部
全部 教程 模板 代码 软件 办公 文章
8种选项开关的切换特效

8种选项开关的切换特效

添加时间：2021-01-31 22:34:40
站长推荐丨赞助论坛，可获取海量资源终身免费下载权限奥!
赞助一下
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型：选项卡切换
  • 模板颜色模板颜色：初级
  • 下载积分下载积分：28 米粒
  • 下载权限下载权限：

    赞助会员

当前位置：

  • 前端特效
  • 表单代码

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

    页面的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="https://jy.tp.yuanmeng.life/" 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>
    上一篇：jQuery全选、反选与获取选中值
    下一篇：jQuery简单的blur属性注册表单验证代码
    相关内容推荐
    资源求助发帖
    查看更多发帖

    回帖

    *

    回帖描述：

    *

    链接类型：

    *

    下载链接：

    密码：
    发帖规则：回帖内容为会员之间的私信，普通网友无法查看。
    免责声明：回帖中提供的链接内容仅供会员之间学习参考使用，获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求，不得违反法律法律的要求。
    站点权责：回帖内容如违反法律法规，站点有权封停账号使用权利。对用户举报的内容，站点有责任及时删除违规内容。
    热点内容推荐

    发帖找资源

    标题：8种选项开关的切换特效

    *

    描述：
    平均回复时间：3-10分钟
    规则介绍：悬赏寻求论坛网友分享资源，站点对分享内容的准确性，合法性，版权等没有足够的监管能力。如果您发现资源不正确，无法使用，不符合法律法律等情况，您可以直接举报资源。站长将尽快核实您的举报，并根据情况，采取封号，退换米粒等处理。

    回帖

    *

    回帖描述：

    *

    链接类型：

    *

    阅读权限：

    *

    下载链接：

    密码：
    发帖规则：回帖内容为会员之间的私信，普通网友无法查看。
    免责声明：回帖中提供的链接内容仅供会员之间学习参考使用，获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求，不得违反法律法律的要求。
    站点权责：回帖内容如违反法律法规，站点有权封停账号使用权利。对用户举报的内容，站点有责任及时删除违规内容。
    • 背景波浪
    • 背景波浪
    • 波浪
    • 波浪
    互联网
    IT编程
    技能技巧
    学习教程
    干货福利
    职业考试

    • 微信客服微信客服
    • qq客服QQ客服
    • qq群QQ群

    聚优部落技术论坛 © 版权所有 鲁ICP备15007479号-6

    Copyright(C)web.com, All Rights Reserved.

    客服
    在线咨询
    周一 至 周日 9:00 ~ 22:00
    QQ：1326974360
    微信：juyoubuluo6688
    客服热线
    18205485173
    工作日 9:00 ~ 18:00
    微信扫码咨询
    客户服务
    欢迎咨询服务
    咨询量较多时，请耐心等待
    福利
    福利
    社群

    关注公众号

    获取更多资讯

    扫码进群(QQ)

    与更多大牛交流沟通

    反馈
    0.179660s