CSS 之 Tab 选中滑动效果

在CSS中实现选中滑动效果，通常指的是在用户选中（如点击或悬停）某个元素时，该元素能够平滑地滑动或移动到另一个位置。这种效果可以通过CSS的transition属性来实现。

一、使用transition属性

transition属性允许你在CSS中定义过渡效果，即在某个属性变化时，如何平滑地从当前状态过渡到新状态。

二、滑动效果代码示例

假设我们有一个按钮，当用户点击它时，我们希望一个盒子从屏幕的一侧滑动到另一侧。

<html>

<head>
    <script>
        window.onload = function(){
            var btn = document.getElementById('slideButton');
            var target = document.querySelector('.slideBox');

            btn.addEventListener('click', function() {
              // 切换active类以触发过渡效果
              target.classList.toggle('active'); 
            });

        }
    </script>

    <style>
        .slideBox {
          position: relative;
          margin-top: 1rem;
          width: 100px;
          height: 100px;
          background-color: #4CAF50;
          left: 0;  /* 初始位置 */
          transition: left 0.5s ease; /* 定义过渡效果 */
        }
         
        /* 未点击状态 */
        .slideBox:not(.active) {
          left: 0; /* 初始位置 */
        }
         
        /* 点击后的状态 */
        .slideBox.active {
          left: 200px; /* 移动到的位置 */
        }
    </style>

</head>
<body>
    <button id="slideButton">点击滑动</button>
    <div class="slideBox"></div>
</body>
</html>
posted @ 2025-03-05 11:27  炎黄子孙，龙的传人  阅读(203)  评论(0)    收藏  举报