我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情

纯CSS通过自定义样式，借助checkbox表单元素的:checked伪类实现switch开关效果的按钮。

为了便于修改和调节，使用了css变量--width、--height控制按钮的大小。

主要用到的css技术：

• css自定义变量，变量的获取和计算；
• flex布局；
• position水平垂直居中；
• border-radius圆角；
• box-shadow内外阴影效果；
• transitionCSS动画中的过渡属性；
• transformCSS动画形变的缩放；
• ::before伪元素和:checked伪类；

html元素结构

<label class="switch-indicate-label" style="--width:80;--height:40">
    <input type="checkbox">
    <span></span>
    <i class="indicator"></i>
</label>

CSS实现

body内的元素水平垂直居中，flex-direction为column垂直方向。

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
    background-color: #36d0f3;
}

设置label鼠标cursor为小手，position: relative控制其内.indicator按钮开关的相对位置。隐藏其内默认的input。

.switch-indicate-label{
    margin: 5px 0;
    position: relative;
    cursor: pointer;
}
.switch-indicate-label input{
    /* appearance: none; */
    display: none;
}

span作为按钮的整体轮廓，其大小和设置的--width、--height相同；box-shadow设置很小的内层阴影；也可以根据需要改为其他背景和阴影颜色。

.switch-indicate-label span{
    position: relative;
    display: block;
    width: calc(var(--width)*1px);
    height: calc(var(--height)*1px);
    border-radius: calc(var(--height)*1px);
    background: #222;
    box-shadow: inset 0 2px 15px rgba(0, 0, 0, .2),
                inset 0 2px 2px rgba(0, 0, 0, .2),
                inset 0 -2px 2px rgba(0, 0, 0, .2);
}

设置按钮开关.indicator，相对轮廓label的绝对位置，按钮为圆形；背景色简单的渐变；设置属性变化的过渡transition时间为0.5s；适当缩放将按钮放在轮廓内。

.switch-indicate-label .indicator{
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--height)*1px); 
    height: calc(var(--height)*1px);
    border-radius: 50%;
    background: linear-gradient(to bottom, #555,#222);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .6),
                inset 0 1px 2px rgba(255, 255, 255, .1);
    transition: .5s;
    transform: scale(.9);
}

也可以修改为其他背景色

background: rgba(255, 255, 255, .5);

添加点击checked选中/切换开关的效果，left移动按钮到轮廓label的最右边：

.switch-indicate-label input:checked ~ .indicator{
    left: calc((var(--width) - var(--height))*1px);
}

点击后左右切换开关

添加按钮中间的开关指示灯效果：居中的小圆点；背景色以及向外模糊的多层阴影。

.switch-indicate-label input ~ .indicator::before{
    content: '';
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transition: .5s;
    background: #f00;
    box-shadow: 0 0 2px #f00,
                0 0 5px #f00,
                0 0 10px #f00,
                0 0 15px #f00,
                0 0 20px #f00,
                0 0 25px #f00,
                0 0 30px #f00,
                0 0 40px #f00;
}

添加选中/开关开启时的指示灯样式：修改背景色和向外模糊的多层阴影的颜色。

.switch-indicate-label input:checked ~ .indicator::before{
    background: #0f0;
    box-shadow: 0 0 2px #0f0,
                0 0 5px #0f0,
                0 0 10px #0f0,
                0 0 15px #0f0,
                0 0 20px #0f0,
                0 0 25px #0f0,
                0 0 30px #0f0,
                0 0 40px #0f0;
}

扩展

还可以修改外层轮廓span的样式，使切换效果更加多变：

.switch-indicate-label input:checked ~ span{
    box-shadow: 2px 2px 5px rgba(0, 255, 0, .5),
                -2px -2px 5px rgba(0, 255, 0, .5),
                2px -2px 5px rgba(0, 255, 0, .5),
                -2px 2px 5px rgba(0, 255, 0, .5);
}

.switch-indicate-label input:checked ~ span{
    background-color: rgba(0, 255, 0, .5);
}

CSS变量（CSS 自定义属性）

CSS变量介绍

css中通过变量名前添加两横线--声明变量；

body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}

CSS变量和标准的属性一样，只是没有默认含义。

各种css值都可以放入css变量中：

:root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;

  --header-height: 68px;
  --content-padding: 10px 20px;

  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);
}

CSS变量的读取和简单计算

上面的示例可以看到，var()函数用于读取变量。var(--width)。

由于--height变量是数字，要转为像素，需要读取后执行calc计算为像素值：

width: calc(var(--height)*1px);

var()第二个参数用来表示变量不存在时的默认值。

width: calc(var(--height,40)*1px);

第一个参数后面的所有部分属于第二个参数，比如：

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

字符串变量可以直接与其他字符串拼接。

--bar: 'hello';
--foo: var(--bar)' world';

如果变量是数值，要想应用到css的单位px、em、%中，需要使用calc()计算函数。

width: calc(var(--height)*1px);

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

变量值带有单位，是不能写成字符串的。

/* 无效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

CSS变量的作用域

同一个 CSS 变量，可以在多个选择器内声明。

CSS变量的作用域是其声明时所在的元素或选择器有效的范围内。优先使用内层变量。

全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们。

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与html选择器相同。

参考

• www.youtube.com/watch?v=p58… 【参考转自B站】
• CSS 变量教程