html5+css3胶囊按钮代码

效果

代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title></title>  
<style>  /* 胶囊开关的样式 */  .switch {  position: relative;  display: inline-block;  width: 60px;  height: 34px;  }  /*隐藏input*/.switch input {  display: none;  }/*胶囊外形*/.slider {  position: absolute;  cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: #ccc;  -webkit-transition: .4s;  transition: .4s;border-radius: 26px;}  /*胶囊里面的圆圈*/.slider::before {  position: absolute;  content: "";  height: 26px;  width: 26px;  left: 4px;  bottom: 4px;  background-color: white;  -webkit-transition: .4s;  transition: .4s;border-radius: 50%;}/*当input被点击时*//*改变颜色*/input:checked + .slider {  background-color: #2196F3;  }  /*移动位置*/input:checked + .slider::before {  -webkit-transform: translateX(26px);  -ms-transform: translateX(26px);  transform: translateX(26px);  }  </style>  
</head>  
<body>  <label class="switch">  <input type="checkbox">  <span class="slider round"></span>  
</label>  <script>  // JavaScript用于处理开关状态（如果需要）  var switchCheckbox = document.querySelector('.switch input[type="checkbox"]');  var slider = document.querySelector('.slider');  switchCheckbox.addEventListener('change', function() {  slider.classList.toggle('round');  });  
</script>  </body>  
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/676584.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！