[分享]css3左右滑动按钮

CSS3 左右滑动按钮是一个非常常见的需求，下面我们将介绍如何使用 CSS3 实现左右滑动按钮。 上面的代码中，我们首先创建了一个包含五个 li 元素的 ul 列表，用于存放需要...

CSS3 左右滑动按钮是一个非常常见的需求，下面我们将介绍如何使用 CSS3 实现左右滑动按钮。

 <div class="slider-container">
        <ul class="slider-list">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <button class="prev"></button>
        <button class="next"></button>
    </div> 

上面的代码中，我们首先创建了一个包含五个 li 元素的 ul 列表，用于存放需要滑动的内容。然后，我们创建了两个按钮，一个用于向左滑动，一个用于向右滑动。

接着，我们需要使用 CSS3 来实现按钮的滑动效果。

 .slider-list {
        display: flex;
        transition: all .3s;
    }
   
    .prev, .next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        background-color: #ccc;
    }
   
    .prev {
        left: 0;
    }
   
    .next {
        right: 0;
    }
   
    .prev:hover, .next:hover {
        background-color: #999;
    }
   
    .prev:before {
        content: '\2039';
        font-size: 20px;
        line-height: 1;
        color: #fff;
        display: block;
        text-align: center;
    }
   
    .next:before {
        content: '\203a';
        font-size: 20px;
        line-height: 1;
        color: #fff;
        display: block;
        text-align: center;
    }
   
    .slider-container:hover .prev {
        left: 0;
    }
    .slider-container:hover .next {
        right: 0;
    }
   
    .slider-container:hover .slider-list {
        transform: translateX(-100px);
    }
   
    .slider-container:hover .slider-list:hover {
        transform: translateX(-200px);
    } 

上面的代码中，我们使用了 flex 布局来实现列表的水平排列，并使用 transition 属性来实现进出场动画。我们同时使用了 position 属性来让按钮定位在容器的两侧，使用了 translateY 属性来让按钮垂直居中。我们在按钮内部添加了一个 before 伪元素来实现箭头的图案。

接着，我们使用 hover 伪类来实现按钮的出现效果。同时，我们也使用 hover 伪类来实现列表的滑动效果。其中，我们通过不断递增的步骤来实现列表的平滑滑动。

最后，我们只需要在按钮的 click 事件中使用 JavaScript 来实现列表的滑动即可。