css写一个原生switch开关按钮

原创

Vam的金豆之路 2022-03-08 14:12:48 博主文章分类：HTML、CSS ©著作权

©著作权归作者所有：来自51CTO博客作者Vam的金豆之路的原创作品，请联系作者获取转载授权，否则将追究法律责任

你好，我是Vam的金豆之路，可以叫我豆哥。2019年年度博客之星、技术领域博客专家。主要领域：前端开发，有什么疑问可以加我哦，自己创建了一个微信技术交流群，可以加我邀请你一起交流学习。最后自己也创建了一个微信公众号：前端历劫之路，欢迎关注。

欢迎阅读本博文，本博文主要讲述【写一个原生switch开关按钮】，文字通俗易懂，如有不妥，还请多多指正。

css写一个原生switch开关按钮_html

<!DOCTYPE html>
<html>
<head>
  <title>switch开关按钮</title>
  <style type="text/css">
#checked {
 width: 60px;
 position: relative;
 margin: 20px auto;
}
.labelBox {
 margin-bottom: 20px;
 background: #409eff; 
 border-radius: 40px;
 width: 60px;
 position: relative;
 height: 32px;
}
.check { 
 display: block;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background: #fff ;
 border: 1px solid #e5e5e5;
 position: absolute;
 top: 0px;
 left: 0px;
}
input[type=checkbox] {
 border: 0 none !important;
 clip: rect(1px,1px,1px,1px);
 height: 1px !important;
 overflow: hidden !important;
 position: absolute !important;
 width: 1px !important;
}

@keyframes labelON {
 0% {
  top: 0px;
  left: 0px;
 }  
 100% { 
  top: 0px;
  left: 28px;
 }
}
@keyframes labelOFF {
 0% {
  top: 0px;
  left: 28px;
 }

 100% { 
  top: 0px;
  left: 0px;
 }
}
input[type=checkbox]:checked + label.check {
 top: 0px;
 left: 28px;  
 -webkit-animation: labelON 0.2s ease-in 0s 1;
 -moz-animation: labelON 0.2s ease-in 0s 1;
 -o-animation: labelON 0.2s ease-in 0s 1;
 -ms-animation: labelON 0.2s ease-in 0s 1;
 animation: labelON 0.2s ease-in 0s 1;
 box-shadow: #244766 -1px 0px 3px;
}

input[type=checkbox] + label.check {
 top: 0px;
 left: 0px;
 -webkit-animation: labelOFF 0.2s ease-in 0s 1;
 -moz-animation: labelOFF 0.2s ease-in 0s 1;
 -o-animation: labelOFF 0.2s ease-in 0s 1;
 -ms-animation: labelOFF 0.2s ease-in 0s 1;
 animation: labelOFF 0.2s ease-in 0s 1;
 box-shadow: #244766 1px 0px 3px;   
}
.status{
  text-align:center;
}
  </style>
</head>
<body>
<p class="status">1</p>
<div id="checked">
  <div class="labelBox">
    <input type="checkbox" value="wi-fi" id="wifi" name="wifi" checked="checked" />
    <label for="wifi" class="check"></label>
  </div>
</div>
</body>
<script type="text/javascript">
  var onOff=true;
  document.querySelector('.status').innerHTML=onOff;
  document.querySelector(".check").onclick=function (argument) {
    // body...
    onOff=!onOff;
    document.querySelector('.status').innerHTML=onOff
  }
</script>
</html>