svg+css美化checkbox开关成昼夜切换晶莹剔透效果代码-html代码-BFW代码库

svg+css美化checkbox开关成昼夜切换晶莹剔透效果代码

代码语言：html

代码描述：svg+css美化checkbox开关成昼夜切换晶莹剔透效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>
body{
    
    background:black;
  
}
.toggle-container {
  --step: 0.5s;
  --ease: linear(
    0 0%,
    0.2342 12.49%,
    0.4374 24.99%,
    0.6093 37.49%,
    0.6835 43.74%,
    0.7499 49.99%,
    0.8086 56.25%,
    0.8593 62.5%,
    0.9023 68.75%,
    0.9375 75%,
    0.9648 81.25%,
    0.9844 87.5%,
    0.9961 93.75%,
    1 100%
  );
  --offset: calc(var(--step) * 0.5);
  --bg-light: hsl(235 5% 85%);
  --bg-dark: #0b0e13;
  --button-light: hsl(223 4% 73%);
  --button-dark: hsl(220 27% 6%);
  --glow: hsl(182 90% 92%);
  width: 100%;
  height: 100vh;
}

.scene {
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  background: var(--bg-dark);
  border-radius: 0px;
  position: relative;
  overflow: hidden;
  transition: background var(--step) var(--ease);
}
.scene::before {
  --size: 45px;
  --line: hsl(0 0% 100% / 0.07);
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  background:
    linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 50% 50% /
      var(--size) var(--size),
    linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
      var(--size) var(--size);
  mask: linear-gradient(-20deg, transparent 50%, white);
  pointer-events: none;
  transition: opacity var(--step) var(--ease);
}
.toggle-input {
  display: none;
}
.toggle-input:checked ~ .scene {
  background: var(--bg-light);
}
.toggle-input:checked ~ .scene::before {
  --line: hsl(0 0% 10% / 0.1);
}
.toggle {
  font-size: 64px;
  height: 2.3em;
  padding: 0;
  border-radius: 2.5em;
  border: 0;
  aspect-ratio: 1.8 / 1;
  position: relative;
  cursor: pointer;
  background: transparent;
  display: block;
}
.socket {
  position: absolute;
  inset: 0;
  border-radius: 3em;
  background: hsl(0 0% 0%);
  box-shadow: -0.05em 0.1em 0.2em -0.2em white;
  transition:
    background var(--step) var(--ease),
    box-shadow var(--step) var(--ease);
}
.socket-shadow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0em 0.075em 0.1em 0em white;
  op.........完整代码请登录后点击上方下载按钮下载查看