div+css实现带标签的大型拨动开关效果代码-html代码-BFW代码库

div+css实现带标签的大型拨动开关效果代码

代码语言：html

代码描述：div+css实现带标签的大型拨动开关效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  color-scheme: dark;
}
body {
  min-height: 100svh;
  padding: 2rem;

  color: white;
  font-family: system-ui;
  display: grid;
  place-content: center;
}

.switch {
  --_switch-bg-clr: #70a9c5;
  --_switch-padding: 4px; /* padding around button*/
  --_slider-bg-clr: rgba(12, 74, 110, 0.65); /* slider color unchecked */
  --_slider-bg-clr-on: rgba(12, 74, 110, 1); /* slider color checked */
  --_slider-txt-clr: #ffffff;
  --_label-padding: 1rem 2rem; /* padding around the labels -  this gives the swith it's global width and height */
  --_switch-easing: cubic-bezier(
    0.47,
    1.64,
    0.41,
    0.8
  ); /* easing on toggle switch */

  width: fit-content;
  display: flex;
  justify-content: center;
  position: relative;
  border-radius: 9999px;
  cursor: pointer;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  position: relative;
  isolation: isolate;
    
}

.switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.switch > span {
  display: grid;
  place-content: center;
  transition: opacity 300ms ease-in-out 150ms;
  p.........完整代码请登录后点击上方下载按钮下载查看