css开关灯特效代码

CSS 开关灯特效是一种非常流行的网页设计效果，可以带来极佳的视觉体验。接下来我们将为大家介绍如何实现这一特效。

首先，我们需要在 HTML 文件中创建一个开关的容器。可以使用 div 或者 button 标签，具体实现方法如下：

  div class="switch">
        label for="toggle" class="toggle-label">
    /label>
        input type="checkbox" id="toggle" class="toggle-input">
      /div>

接下来我们需要为容器设置 CSS 样式，这样才能实现开关灯的特效。具体实现方法如下：

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

最后，在 JS 文件中为开关设置点击事件，这样开关状态就可以相应地改变了。具体实现方法如下：

  const toggle = document.querySelector('#toggle');
      toggle.addEventListener('click', () =>
 {
        document.body.classList.toggle('light-theme');
  }
    );
    

到此为止，开关灯特效的代码实现已经完成了。大家可以根据个人喜好进行修改，创造出自己的独特效果。

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