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{
    padding:100px;
}
.theme-switch {
  --toggle-size: 32px;
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 0.38em;
  --container-light-bg: #5caad4;
  --container-night-bg: #1b1e36;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #f5c518;
  --moon-bg: #d8d4c0;
  --spot-color: #9b9787;
  --circle-container-offset: calc(
    (var(--circle-container-diameter) - var(--container-height)) / 2 * -1
  );
  --stars-color: #fff8e1;
  --clouds-color: #f4f4f4;
  --back-clouds-color: #bacfe0;
  --transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: 0.3s cubic-bezier(0, -0.02, 0.35, 1.17);
  display: inline-block;
}

.theme-switch,
.theme-switch *,
.theme-switch *::before,
.theme-switch *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background-image: linear-gradient(
    to bottom,
    var(--container-light-bg) 0%,
    #4a92bd 100%
  );
  transition: all var(--transition);
  box-shadow:
    0 0 0 2.5px #1a1a1a,
    3px 4px 0 2.5px rgba(26, 26, 26, 0.22);
  transform: rotate(-0.7deg);
  filter: url(#sketchy);
}

.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image: repeating-linear-gradient(
    -50deg,
    transparent,
    transparent 7px,
    rgba(255, 255, 255, 0.04) 7px,
    rgba(255, 255, 255, 0.04) 8px
  );
 .........完整代码请登录后点击上方下载按钮下载查看