当前位置：首页 > 网页特效 > 动画效果

一组精美的纯CSS3滑动开关按钮

分类：动画效果日期：2024-05-14 点击(1) 评论(0)

一组精美的纯CSS3滑动开关按钮

简介

##### HTML结构
该滑动按钮效果的基本HTML结构使用一个div元素来包裹一个input元素和两个label元素。

```html
<div class="switch-box">
  <input id="default" class="switch-box-input" type="checkbox" />
  <label for="default" class="switch-box-slider"></label>
  <label for="default" class="switch-box-label">Default</label>
</div>
```
#####  CSS样式
第一个label元素.switch-box-slider用于制作滑动按钮的滑动轴。

```html
.switch-box .switch-box-slider {
  position: relative;
  display: inline-block;
  height: 8px;
  width: 32px;
  background: #d5d5d5;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
```
.switch-box-slider元素的::after伪元素用于制作圆形的滑块。

```html
.switch-box .switch-box-slider:after {
  position: absolute;
  left: -8px;
  top: -8px;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eeeeee;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  content: '';
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}          
```        
当.switch-box-input元素处于checked状态时，.switch-box-slider的:after伪元素的left属性被修改，圆形滑块被移动。

```html
.switch-box .switch-box-input ~ .switch-box-label {
  margin-left: 8px;
}
.switch-box .switch-box-input:checked ~ .switch-box-slider:after {
  left: 16px;
}              
```

web299.com

一组精美的纯CSS3滑动开关按钮

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果