css中如何实现滑块效果 |css3 向上滑动动画

1.使用CSS3的transform属性和transition属性实现：

.slider{
width: 100px;
height: 20px;
background-color: #ccc;
border-radius: 10px;
position: relative;
}
.slider:before{
content: "";
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
top: -5px;
left: -5px;
transition: transform .2s ease-in-out;
}
.slider.active:before{
transform: translateX(80px);
}

以上代码中，首先定义了一个.slider类，表示整个滑块的样式；通过:before伪类来添加滑块的按钮样式，并且用一个.active类来表示按钮划过去的状态

2.使用CSS3的transition属性和left属性实现：

.slider{
width: 100px;
height: 20px;
background-color: #ccc;
border-radius: 10px;
position: relative;
}
.slider:before{
content: "";
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
top: -5px;
left: 0;
transition: left .2s ease-in-out;
}
.slider.active:before{
left: 80px;
}

以上代码中，首先定义了一个.slider类，表示整个滑块的样式；通过:before伪类来添加滑块的按钮样式，并且用一个.active类来表示按钮划过去的状态

3.使用原生的JavaScript实现：

var slider = document.querySelector('.slider'); // 获取.slider元素
var sliderBtn = slider.querySelector(':before'); // 获取伪类:before元素
slider.onmousedown = function(e){ // 当鼠标按下时
var startX = e.clientX, // 获取鼠标在屏幕中的起始位置
startLeft = parseInt(getComputedStyle(sliderBtn).left); // 获取按钮在滑块中的初始位置
document.onmousemove = function(e){
var moveX = e.clientX - startX, // 获取鼠标在屏幕中移动的距离
sliderBtnLeft = Math.max(0, Math.min(startLeft + moveX, 80)); // 计算按钮在滑块中的位置
sliderBtn.style.left = sliderBtnLeft + 'px'; // 通过修改left属性来使按钮移动
}
}
document.onmouseup = function(){ // 当鼠标松开时，重置鼠标移动事件
document.onmousemove = null;
}

以上代码中，首先定义了一个slider变量来获取.slider这个元素；用slider.onmousedown来监听鼠标按下的事件；然后用document.onmousemove来监听鼠标在屏幕中移动的事件；当鼠标松开时，用document.onmouseup来重置鼠标移动事件

总结

CSS中，实现滑块效果主要用到了常见css属性：transform、transition、left等等。此外，用JavaScript原生方式实现滑块效果也是比较常用的方式。