css怎么做开关效果

CSS可以用来制作各种各样的效果，包括点击开关效果。在本文中，我们将介绍如何使用CSS制作开关效果。

    label class="switch">
            input type="checkbox">
            span class="slider round">
    /span>
        /label>
    

要开始制作开关效果，需要一个input> 元素和一个label> 元素。input> 元素类型需要是checkbox，并添加一个class名称为switch。label> 元素需要包含input元素以及一个class名为slider和round的span> 元素。

现在我们将使用CSS来为此添加样式。

.switch {
        position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
}
.switch input {
       display:none;
}
.slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
}
.slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
}
input:checked + .slider {
      background-color: #2196F3;
}
input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
}
 .slider.round {
      border-radius: 34px;
}
.slider.round:before {
      border-radius: 50%;
}
    

首先，我们为switch class定义了它的位置和尺寸。接下来，我们将输入元素的display设置为none来隐藏它。

然后，我们使用slider class来定义开关及其背景颜色和转换时间。使用:before来定义圆形的开关钮。我们使用:checked选择器来更改打开开关时的样式。使用transform属性来动态移动前面的圆形钮。

最后，我们使用了.slider.round和.slider.round:before选择器来定义圆形的形状。

现在您可以将这些代码应用于网站中的任何开关元素。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！