html+css+js制作简单switch 开关

 

 

html+css+js制作简单switch 开关 

<style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;

        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
        }

        .switch-container {
            width: 350px;
            height: 150px;
            border: 1px solid #e2ebf0;
            display: flex;
            justify-content: center;
            align-items: center;
            
        }
        .switch-container span {
            color: #666;
            cursor: pointer;
        }
        .switch-container .toggler {
            position: relative;
            height: 40px;
            width: 100px;
            border-radius: 50px;
            background: #ffdde1;
            margin: 0 10px ;

            transition: all .2s linear;
        }
        .switch-container .toggler::before{
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            height: 28px;
            width: 28px;
            border-radius: 50%;
            background: #fff;
            transition: all .2s linear;

        }
        .switch-container.active .toggler::before {
                left: 65px;            
        }
        .switch-container.active .toggler{
            background-color: #ee9ca7;
        }
       .switch-container .close{
            color: #FF4B2B;
        }
    </style>

<body>
    <div class="switch-container">
        <span class="open">打开</span>
        <span class="toggler "></span>
        <span class="close">关闭</span>
    </div>
    <script>
        let open = document.querySelector('.open')
        let close = document.querySelector('.close')
        let switchContainerDom = document.querySelector('.switch-container')
        switchContainerDom.addEventListener('click',function(){
            switchContainerDom.classList.toggle('active')
            
            if (switchContainerDom.classList.contains('active')) {
                open.style.color = '#FF4B2B'
                close.style.color = '#000'
            }else{
                open.style.color = '#000'
                close.style.color = '#FF4B2B '
            }

        })

    </script>
</body>

 

posted @ 2022-08-17 14:56  指尖掠过  阅读(1255)  评论(0)    收藏  举报