丝滑按钮切换

最新推荐文章于 2023-04-26 10:39:47 发布

jackzcq~

最新推荐文章于 2023-04-26 10:39:47 发布

阅读量258

点赞数

文章标签： css html css3

原文链接：https://juejin.cn/post/7129788202335862791

版权

丝滑切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>丝滑按钮切换</title>
    <style>
             /* 按钮选中缩放动画 */
    @keyframes btnSelScale {
        0% {
            transform: scale(1);
        }
        80% {
            transform: scale(1.15);
        }
        100% {
            transform: scale(1.1);
        }
    }

     /* 按钮未选中缩放动画 */
    @keyframes btnUnSelScale {
        0% {
            transform: scale(1.1);
        }
        80% {
            transform: scale(0.95);
        }
        100% {
            transform: scale(1);
        }
    }
    body {
        perspective: 500px;
        background:url('https://tse2-mm.cn.bing.net/th/id/OIP-C.jFX-nZ_w2Lx8xW1WMp2ZSwAAAA?w=141&h=150&c=7&r=0&o=5&pid=1.7');
    }
    #btnWrapper {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    margin-top: 200px;
    width: 640px;
    height: 320px;
    padding: 12px 16px;
    border-radius: 12px; 
    overflow: hidden; 
    background-color: #e2e6eb; 
    box-shadow: -10px -10px 15px #f5f9fd, 10px 10px 15px #d8dbe5; 
    /* transform-origin: center; */
    transform-origin: var(--wraper-origin); 
    transition: transform 0.4s cubic-bezier(0, 0, 0.48, 1); 
    }
    .rotateWrap {
        transform: rotateY(var(--wraper-rotate));

    }
    #btnWrapper::before {
    content: "";
    position: absolute;
    left: 16px; 
    top: 12px; 
    width: calc(50% - 16px - 8px);
    height: calc(100% - 24px);
    border-radius: 12px;
    box-shadow: inset 8px 8px 6px #d9dce6, 
                inset -5px -5px 15px #f5f9fd, 
                inset -5px -5px 15px #f5f9fd, 
                inset 7px 7px 6px #d9dce6;
    }
    .btn {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 100%;
    padding: none; 
    color: #aaa; 
    cursor: pointer;
    transition: color 0.4s linear;
    animation: btnSelScale 0.6s linear;
    }
    .active {
    color: #111; 
    transform: scale(1.1);
    animation: btnUnselScale 0.4s linear;
    }
    #btnWrapper::before {
        content: "";
        /* ...其他属性 */
        left: var(--groove-left); 
        /* ...其他属性 */
        transition: left 1s cubic-bezier(0.82, 0.12, 0.18, 0.88); 
    }
    </style>
</head>
<body>
    <div id="btnWrapper">
        <div class="btn active">
            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.jFX-nZ_w2Lx8xW1WMp2ZSwAAAA?w=141&h=150&c=7&r=0&o=5&pid=1.7" style="width:100px;height:100px;border-radius:50px">
        </div>
        <div class="btn">
            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.jFX-nZ_w2Lx8xW1WMp2ZSwAAAA?w=141&h=150&c=7&r=0&o=5&pid=1.7" style="width:100px;height:100px;border-radius:50px">
        </div>
    </div>
    <script>
    // 获取容器元素
    let wrapper = document.getElementById('btnWrapper');
    // 先给容器设置一个css变量并附初始值
    wrapper.style.setProperty('--groove-left', '12px');
    // 获取按钮元素
    let btns = document.getElementsByClassName('btn');
    for (let i = 0; i < btns.length; i++) {
    // 给每个按钮添加点击事件
    btns[i].addEventListener('click', function (e) {
        // 点击后，修改css变量的值
        wrapper.style.setProperty('--groove-left', `calc(12px + ${i * 50}%)`);
        wrapper.style.setProperty('--wraper-origin', `${i === 0 ? '80% top' : '20% top'}`); // 动态修改原点位置
        wrapper.style.setProperty('--wraper-rotate', `${i === 0 ? -720 : 720}deg`); // 按钮1为-8°，按钮2为8°
        wrapper.className = 'rotateWrap';
        resetBtn(btns)
        setTimeout(()=> {
            wrapper.className = ''
        }
        ,500)
    })
    }
    function resetBtn(btns) {
        for(let i=0;i<btns.length;i++){
            setTimeout(()=>{
                btns[i].className = 'btn'
            },100)
        }
    }

    </script>
</body>
</html>