简易switch实现微信切换开关效果

最近因为个人开发需要，写了一个类似微信设置中心的““切换按钮””，为了让更多的小伙伴也能使用和学习，我把它贴出来（如下）

<!DOCTYPE html>
<html>	
<head>
<meta charset="utf-8"> 
<title>switch切换-时光旅行</title> 
<style> 
.function-setting-switch{top:2px;right:10px;width:35px;height:20px}
.function-setting-switch .function-switch-button{display:inline-block;position:relative;cursor:pointer;width:35px;height:20px;top:1px}
.function-setting-switch .function-switch-button input{opacity:0;position:absolute;z-index:10}
.function-setting-switch .function-switch-button input,.function-setting-switch .function-switch-button span{position:absolute;display:inline-block;width:35px;height:20px;background:#fff;box-shadow:inset 0 0 5px 2em #ccc;border-radius:1em;vertical-align:-.15em;transition:all .4s ease;-ms-transition:all .4s ease}
.function-setting-switch .function-switch-button input:checked+span{box-shadow:inset 0 0 0 2em #38f}
.function-setting-switch .function-switch-button input+span:after{position:absolute;display:block;content:'';width:19px;height:18px;top:1px;left:1px;border-radius:1em;background:#fff;box-shadow:inset 0 0 0 .03em rgba(0,0,0,.1),0 0 .05em rgba(0,0,0,.05),0 .1em .2em rgba(0,0,0,.2),0 .1em .2em rgba(0,0,0,.2);transition:all .4s ease;-ms-transition:all .4s ease}
.function-setting-switch .function-switch-button input:checked+span:after{left:15.5px}
.function-setting-switch .title{position:absolute;right:40px;top:-2px;color:#333;font-size:12px;width:40px}
.function-setting-switch .function-setting-switch-close{color:#b6b6b6}
.function-swtich-hide{display:none}
</style>
</head>
<body>
<!--switch切换/设置按钮动画-->
<span class="function-setting-switch">
 <label class="function-swtich-hide"></label>
    <label class="function-setting-switch-close">
        </label>
          <label class="function-switch-button function-switch-button-persoanl">
           <input type="checkbox" class="function-setting-checkbox-persoanl" data-type="record" checked="checked">
         <span></span>
     </label>
 </span>
</body>
</html>

项目地址：https://gitee.com/xiaoquanbiji/xiaoquan_notes/blob/master/mycode/switch/function.htm

简易switch实现微信切换开关效果

猜你喜欢