先对一个input框进行圆角处理，input框的type属性选择checbox，用display:none将样式彻底隐藏。然后用一个无意义label标签对他进行宽高的处理，得先把label转化一下用display:inline-block;。设置好用css3的transition利用他的过度效果得到。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑块</title>
<style>
.box{
width:100px;
height:30px;
background:black;
opacity:0.6;
border-radius:40px;
}
label{
display:inline-block;
width:20px;
height:20px;
background:#ccc;
border-radius:50%;
position:relative;
left:0px;
top:5px;
transition:all 0.5s ease;
}
/*当你点击的时候小滑块向左移*/
input:checked + label{
left:80px;
background:#267832;
}
</style>
</head>
<body>
<div class="box">
<input type="checkbox" style="display:none" id="on" />
<label for="on"></label>
</div>
</body>
</html>
分享到：
相关推荐
在现代网页设计中，CSS3已经成为了不可或缺的一部分，它提供了许多强大的功能，其中之一就是实现3D效果。本教程将深入探讨如何使用CSS3创建一个3D图片滑块效果，为用户带来更生动、更具交互性的视觉体验。 首先，...
在这个特效中，3D转换被用来实现滑块的立体展示和拖动时的动态变换。 滑块组件通常由滑块轨道、滑块手柄和进度条组成。在CSS3 3D滑块进度条特效中，滑块轨道可能被设置为一个具有3D透视的容器，滑块手柄则在该容器...
CSS3则主要用来实现滑块的动态效果和图像的布局。CSS3的新特性如边框半径、阴影、过渡和动画，使得滑块看起来更加流畅自然。同时，通过绝对定位和相对定位，我们可以精确控制滑块和图像的位置，实现两部分图像的无缝...
【CSS3硬件加速与滑块实现】 在现代网页设计中，CSS3已经成为不可或缺的一部分，它提供了许多增强用户体验的新特性，其中硬件加速就是一项重要的优化手段。硬件加速能够利用图形处理器（GPU）来处理某些复杂的视觉...
CSS3在实现滑块效果中起到关键作用，主要涉及以下方面： 1. **全屏布局**：使用`height: 100vh;`使容器占据整个视口高度，确保滑块全屏显示。 2. **过渡效果**：通过`transition`属性定义图片和背景的平滑过渡时间...
通过绑定`mousedown`、`mousemove`和`mouseup`事件，实现滑块的拖动功能。在拖动过程中，滑块的位置会根据鼠标移动的距离实时更新，并触发回调函数，将当前滑块的位置值传递给函数进行处理。回调函数可以根据需要...
【标题】"纯CSS3简洁滑块范围数值输入特效.zip" 涉及的主要知识点是CSS3中的滑块（slider）样式以及如何通过CSS3实现交互式的用户界面元素。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，引入了许多新...
【jQuery CSS3旋转滑块幻灯片】是一个利用jQuery库和CSS3技术构建的动态展示内容的组件。在网页设计中，幻灯片通常用于在有限的空间内展示多个图像或信息，通过滑动效果吸引用户的注意力，提升用户体验。这个特定的...
在本项目中，“jQuery与CSS3选择滑块按钮代码.zip”是一个包含实现交互式滑块按钮的资源包。滑块按钮是一种常见的用户界面元素，常用于调节音量、设置值或者进行选择。这个项目结合了JavaScript库jQuery和CSS3技术来...
本项目结合了jQuery库与CSS3技术，实现了一个功能强大的旋转滑块幻灯片，能够为网站增添视觉吸引力并有效地展示内容。下面我们将详细探讨这一主题。 首先，jQuery是JavaScript的一个轻量级库，它简化了DOM操作、...
在`script.js`文件中，我们可以利用jQuery监听`change`事件，实现滑块开关的回调函数。例如： ```javascript $(document).ready(function() { $('#sliderSwitch').on('change', function() { var isChecked = $...
这个“jQuery+CSS3实现动画滑块幻灯片”项目结合了现代Web技术的力量，提供了优雅且功能丰富的动态展示方式。接下来，我们将详细探讨这个项目的各个知识点。 首先，jQuery是一个广泛使用的JavaScript库，它简化了...
例如，可以使用CSS3的`transition`属性来实现平滑的滑块移动效果，或者使用`@keyframes`定义动画，使滑块在拖动时更具有动态感。 具体实现过程大致如下： 1. 创建HTML结构：HTML部分通常包含一个滑块容器，滑块...
而Transforms则可以用来改变元素的位置和大小，实现滑块的移动和缩放。 接下来，我们深入探讨实现这个滑块特效的具体步骤： 1. **HTML结构**：首先，我们需要创建一个包含多个滑块内容的容器，每个内容块对应一个...
【jQuery CSS3实现动画滑块幻灯片】是一种常见的网页元素，用于展示一系列图片或内容，通常用在网站的首页或者产品展示区域。这个压缩包包含的资源是使用JavaScript库jQuery和CSS3技术来创建一个功能丰富的滑动幻灯...
描述中提到“纯Css3实现滑块动画菜单 图标动画很酷”，这意味着这个插件完全依赖CSS3来创建滑动和动画效果，没有使用JavaScript或其他编程语言。CSS3的动画功能通过`@keyframes`规则来定义，可以创建出各种复杂的...
"jQ+CSS3滑块导航菜单 jQuery+CSS3滑块导航菜单网页特效" 是一个结合了jQuery和CSS3技术的创新性导航菜单实现，旨在提供更加动态、交互性强的用户体验。这个压缩包文件包含了一个实现这一效果的实例，让我们深入探讨...
此外，压缩包中的"js"文件夹可能包含了JavaScript代码，这是实现滑块交互功能的关键。JavaScript与HTML5和CSS3结合，可以处理用户的输入，比如监听滑块的拖动事件，计算新的价格值，并实时更新页面上的价格显示。...