css3 滑动按钮效果

CSS3 是 web 前端开发中必不可少的技术之一。作为一种新兴的技术，CSS3 提供了许多新的功能和效果，其中之一就是滑动按钮效果。

.slide-btn {
    width: 60px;
    height: 30px;
    border-radius: 15px;
    background-color: #d3d3d3;
    position: relative;
    cursor: pointer;
}
 .slide-btn span {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #fff;
}
 .slide-btn::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease-in-out;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
 .slide-btn.active::before {
    left: 30px;
}
    

以上是一个简单的 CSS3 滑动按钮效果的代码片段。首先定义一个 class 为 slide-btn 的元素，设置元素的基本样式。然后使用伪元素 ::before 建立一个圆形按钮，使用 transition 属性和 box-shadow 属性设置按钮的过渡效果和阴影效果。

在实现滑动按钮的功能时，需要使用 JavaScript。在元素被点击时给元素添加 class 为 active，这样就会触发 CSS3 的过渡效果，将圆形按钮向右移动，达到滑动效果。

总的来说，CSS3 滑动按钮效果极大地丰富了 web 前端开发的体验，增加了可玩性和趣味性，也为用户带来了更好的交互体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！