纯css手写switch

CSS 手写switch 纯css手写switchcss变量

纯css手写switch

思路：

switch需要的元素有：开关背景、开关按钮。点击按钮后，背景色变化，按钮颜色变化，呈现开关打开状态。

利用type=checkbox，来实现switch效果(修改样式)。

细节：

开关背景可以在里面添加个<span>的作为被修改的背景。开关按钮可以用伪元素来实现。点击后颜色变化，可以根据checkbox特性，使用伪类选择器来添加改变背景色的样式，且通过伪类选择器，让伪元素移动位置。

前置知识一：

伪类选择器： 概念：为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。 比如鼠标悬停hover效果，或者获取焦点focus效果。 使用：用冒号表示

伪元素： 概念：创建一些不在Dom树中的元素，并为其添加样式。 使用：用双冒号表示。

前置知识二：正常来说，我们dispaly:none的时候，我们就不会触发隐藏元素的点击事件了。 对于type=checkbox，当我们在外层加一个<label>标签，就可以在隐藏input的时候，点击label触发选中事件，我们经常用这种方式来定义一些样式。

<!-- css实现switch开关 --> <!-- 加一个label标签,当我们点击label标签的时候复选框会被选中 --> <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> <style> :root{ --switchWidth:90px; --switchHeight:40px; } /* 前置操作： 1. 外层定义switch的大小。 2. 隐藏checkbox框。 */ /* 定义开关的大小 */ .switch { position: relative; display: inline-block; width: var(--switchWidth); height: var(--switchHeight); } /* 隐藏原本的复选框 */ .switch input { display: none; } /* 第一步： 1.定义switch的背景：让span标签，填充满父元素，用作switch的背景。 2.定义switch的开关按钮：使用伪元素，给switch添加按钮。position:absolute会找离着自己最近的relative定位。 */ /* 开关背景 */ .slider { position: absolute; /* 子绝父相定位 */ cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #eee; transition: .5s; /* 过渡，所有的都0.5S */ border-radius: 100px; } /* 开关按钮 */ .slider::before { content: ""; height: 30px; width: 30px; border-radius: 20px; position: absolute; left: 8px; bottom: 5px; background-color: #aeaaae; transition: .4s; } /* 第二步： 1.选中的时候更改起兄弟元素样式。也就是修改选中的背景色。 2.选中的时候，开关按钮向左移动一段距离且改变颜色。 */ input:checked + .slider{ background: green; } /* 使用伪类与伪元素。当input选中的时候，已经添加的伪类，颜色变白，且移动44px */ input:checked + .slider::before{ background-color: #fff; transform: translateX(44px); } </style> css变量 <style> :root{ --size:200px; } .box{ height:var(--size); width:var(--size); background:red; } .box .item{ height:calc(var(--size)/2); width:calc(var(--size)/2); background:green; } </style> <div class="box"> <!-- css变量 --> <!-- 使用方式： 1.通过 " -- " 来定义一个css变量 2.使用的时候，通过var方式引用。 3.css变量同样可以用于计算。 --> <!-- 使用场景： css变量使用非常广泛，比如我们定义一个组件，如果不用变量的话， 如果要改小宽度或者高度，是很麻烦的，会有连带效果。用变量以后会方便多。 其次，可以方便于复用。 --> <div class="item"></div> </div>