web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
动画效果
一组精美的纯CSS3滑动开关按钮
分类:
动画效果
日期:
2024-05-14
点击(1)
评论(0)
演 示
免费下载
简介
##### HTML结构 该滑动按钮效果的基本HTML结构使用一个div元素来包裹一个input元素和两个label元素。 ```html
Default
``` ##### 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; } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告