怎样用css3完成switch组件电源开关的方式

日期:2021-01-20 类型:科技新闻 

关键词:网站建设,创建网站,免费建站平台,智能建站,企业建网站

本文详细介绍了用css3完成switch组件的方式,共享给大伙儿,实际以下:

根据表单的checkbox

实际效果图

基本原理

checkbox, 有两种情况, 没选定和选定, 入选中的情况下(:checked), 更改款式便可, 最先得消除访问器默认设置的款式, apperance: none, 本文编码只在chrome中运作, 假如必须写适配性编码, 给apperance和transition再加前缀就好

html编码

<input class='switch-component' type='checkbox'>

css编码

// switch组件
.switch-component {
  position: relative;
  width: 60px;
  height: 30px;
  background-color: #dadada;
  border-radius: 30px;
  border: none;
  outline: none;
  -webkit-appearance: none;
  transition: all .2s ease;
}

// 按钮
switch-component::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #fff;
  border-radius: 50%;
  transition: all .2s ease;
 }

// checked情况时,情况色调更改
.switch-component:checked {
  background-color: #86c0fa;
}

// checked情况时,按钮部位更改
.switch-component:checked::after {
  left: 50%;
 }

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:盆友圈做广告宣传的1些小窍门 返回下一篇:没有了