html5+css3胶囊按钮代码

supermodule2024-02-09 16:45
效果

代码

html 复制代码
<!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>