div+css实现昼夜切换开关效果代码-html代码-BFW代码库

代码语言：html
代码描述：div+css实现昼夜切换开关效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

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


  
<style>
*,
*:after,
*:before {
        box-sizing: border-box;
}

:root {
        --easing: ease-in-out;
        --speed: 0.35s;
        --width: clamp(200px, 45vmin, 500px);
        --ar: 8 / 3;
        --ray: hsl(0 0% 100% / 0.5);
        --sun: hsl(47, 91%, 58%);
        --moon: hsl(212, 13%, 82%);
        --crater: hsl(221, 16%, 68%);
        --bg: hsl(219, 30%, 88%);
        --bear-speed: 10s;
}

body {
        display: grid;
        place-items: center;
        min-height: 100vh;
        overflow: hidden;
        background: var(--bg);
        font-family: sans-serif, system-ui;
}

.toggle__backdrop:first-of-type .clouds path:first-of-type {
        fill: var(--ray);
}

.toggle {
        width: var(--width);
        aspect-ratio: var(--ar);
        border-radius: calc(Infinity * 1px);
        border: 0;
        position: relative;
        padding: 0;
        overflow: hidden;
        cursor: pointer;
        transition: background var(--speed) var(--easing);
        --sky: hsl(204, 53%, 47%);
        --night: hsl(229, 25%, 16%);
        outline-color: transparent;
        background: hsl(
                calc(204 + (var(--dark, 0) * 25))
                calc((53 - (var(--dark, 0) * 28)) * 1%)
                calc((47 - (var(--dark, 0) * 31)) * 1%)
        );
        box-shadow:
                calc(var(--width) * 0) calc(var(--width) * 0.02) calc(var(--width) * 0.01) calc(var(--width) * -0.0025) hsl(210 10% 100% / 0.95),
                calc(var(--width) * 0) calc(var(--width) * -0.02) calc(var(--width) * 0.01) calc(var(--width) * -0.0025) hsl(210 10% 10% / 0.2),
                calc(var(--width) * 0) calc(var(--width) * 0.02) calc(var(--width) * 0.5) 0 hsl(210 10% 100% / 0.15);
}

.toggle:after {
        content: "";
        position: absolute;
        inset: 0;
        box-shadow:
                calc(var(--width) * 0) calc(var(--width) * -0.025) calc(var(--width) * 0.025) 0 hsl(210 10% 10% / 0.15) inset,
                calc(var(--width) * 0) calc(var(--width) * 0.025) calc(var(--width) * 0.025) 0 hsl(210 10% 10% / 0.65) inset;
        border-radius: calc(Infinity * 1px);
}

.toggle__backdrop {
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
        transition: translate var(--speed) var(--easing);
        translate: 0 calc(
                var(--dark, 0) * (100% - (3 / 8 * var(--width)))
        );
}

[aria-pressed=false] .toggle__backdrop:last-of-type {
        transition-timing-function: cubic-bezier(.2,-0.6,.7,1.6);
}
[aria-pressed=false] .stars path {
        transition-delay: 0s;
}

.stars path {
        transform-box: fill-box;
        transform-origin: 25% 50%;
        scale: calc(0.25 + (var(--dark, 0) * 0.75));
        transition: scale var(--speed) calc(var(--speed) * 0.5) var(--easing);
}

.toggle__indicator {
        height: 100%;
        aspect-ratio: 1;
        border-radius: 0%;
        display: grid;
        place-items: center;
        padding: 3%;
}

.pilot-bear {
        position: absolute;
        width: 25%;
}

.toggle__star {
        height: 100%;
        aspect-ratio: 1;
        border-radius: 50%;
        position: relative;
        transition: translate var(--speed) var(--easing);
        translate: calc((var(--dark, 0) * -10%) + 5%) 0;
        translate: calc((var(--dark, 0) * -18%) + 5%) 0;
}

.sun {
        background: var(--sun);
        position: absolute;
        inset: 0;
        border-radius: 50%;
        overflow: hidden;
        box-shadow:
                calc(var(--width) * 0.01) calc(var(--width) * 0.01) calc(var(--width) * 0.02) 0 hsl(210 10% 100% / 0.95) inset,
                calc(var(--width) * -0.01) calc(var(--width) * -0.01) calc(var(--width) * 0.02) 0 hsl(210 10% 20% / 0.5) inset;
}
.moon {
        position: absolute;
        inset: -1%;
        border-radius: 50%;
        background: var(--moon);
        transition: translate var(--speed) var(--easing);
        translate: calc((100 - (var(--dark, 0) * 100)) * 1%) 0%;
        box-shadow:
                calc(var(--width) * 0.01) calc(var(--width) * 0.01) calc(var(--width) * 0.02) 0 hsl(210 10% 100% / 0.95) inset,
                calc(var(--width) * -0.01) calc(var(--width) * -0.01) calc(var(--width) * 0.02) 0 hsl(210 10% 10% / 0.95) inset;
}

.moon__crater {
        position: absolute;
        background: var(--crater);
        border-radius: 50%;
        width: calc(var(--size, 10) * 1%);
        aspect-ratio: 1;
        left: calc(var(--x) * 1%);
        top: calc(var(--y) * 1%);
        box-shadow:
                calc(var(--width) * 0.01) calc(var(--width) * 0.01) calc(var(--width) * 0.01) 0 hsl(210 10% 6% / 0.25) inset,
                0 calc(var(--width) * 0.005) calc(var(--width) * 0.01) 0 hsl(210 10% 100% / 0.25);
}

.moon__crater:nth-of-type(1) {
        --size: 18;
        --x: 40;
        --y: 15;
}
.moon__crater:nth-of-type(2) {
        --size: 20;
        --x: 65;
        --y: 58;
}
.moon__crater:nth-of-type(3) {
        --size: 34;
        --x: 18;
        --y: 40;
}

.toggle__star:before {
        content: "";
        z-index: -1;
        width: 356%;
        background:
                radial-gradient(hsl(0 0% 100% / 0.25) 40%, transparent 40.5%),
                radial-gradient(hsl(0 0% 100% / 0.25) 56%, transparent 56.5%)
          hsl(0 0% 100% / 0.25);
        border-radius: 50%;
        aspect-ratio: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transition: translate var(--speed) var(--easing);
        translate: calc(
                (50 - (var(--dark, 0) * 4)) *
                -1%
        )
        -50%;
}

.toggle__star:after {
        content: "";
        position: absolute;
        inset: 0;
        display: block;
        background: hsl(0 0% 0% / 0.5);
        filter: blur(4px);
        translate: 2% 4%;
        border-radius: 50%;
        z-index: -1;
}

.toggle__indicator-wrapper {
        position: absolute;
        inset: 0;
        transition: translate var(--speed) var(--easing);
        translate: calc(
                var(--dark, 0) * (var(--width) - (3 / 8 * var(--width)))
        ) 0;
}

[aria-pressed=true] {
        --dark: 1;
}

/* Fun stuff! */

/* We have 11 stars */

.stars g {
        transform-box: fill-box;
        transform-origin: 50% 50%;
}
.stars g:nth-of-type(3) {
        -webkit-animation: twinkle 4s -2s infinite;
                animation: twinkle 4s -2s infinite;
}

.stars g:nth-of-type(11) {
        -webkit-animation: twinkle 6s -2s infinite;
                animation: twinkle 6s -2s infinite;
}

.stars g:nth-of-type(9) {
        -webkit-animation: twinkle 4s -1s infinite;
                animation: twinkle 4s -1s infinite;
}

@-webkit-keyframes twinkle {
        0%, 40%, 60%, 100% {
                transform: scale(1);
        }
        50% {
                transform: scale(0);
        }
}

@keyframes twinkle {
        0%, 40%, 60%, 100% {
                transform: scale(1);
        }
        50% {
                transform: scale(0);
        }
}

.astrobear {
        width: 12%;
        position: absolute;
        top: 100%;
        left: 0%;
        transition: translate calc(var(--speed) + (var(--dark, 0) * (var(--bear-speed) - var(--speed))))
                calc(var(--bear-speed) * (0.4 * var(--dark, 0))) linear;
        translate: calc(var(--dark, 0) * 400%) calc(var(--dark, 0) * -350%);
}

.astrobear svg {
        transform-origin: 50% 75%;
        scale: var(--dark, 0);
        rotate: calc(var(--dark, 0) * 360deg);
        transition: rotate calc(var(--speed) + (var(--dark, 0) * (var(--bear-speed) - var(--speed)))) calc(var(--bear-speed) * 0.4) linear, scale var(--speed) var(--easing);
}


.astrobear__container {
        position: absolute;
        overflow: hidden;
        inset: 0;
        -webkit-clip-path: inset(0 0 0 0);
                clip-path: inset(0 0 0 0);
        opacity: var(--dark, 0);
        translate: 0 calc(-200% + (var(--dark, 0) * 200%));
        transition: opacity var(--speed) var(--easing), translate var(--speed) var(--easing);
}

.pilot__container {
        position: absolute;
        overflow: hidden;
        inset: 0;
        -webkit-clip-path: inset(0 0 0 0);
                clip-path: inset(0 0 0 0);
        opacity: calc(1 - var(--dark, 0));
        translate: 0 calc(var(--dark, 0) * 200%);
        transition: opacity var(--speed) var(--easing), translate var(--speed) var(--easing);
}

.pilot-bear {
        width: 18%;
        position: absolute;
        top: 70%;
        left: 100%;
        transition:
                translate
                        calc(
                                var(--speed) + ((1 - var(--dark, 0)) *
                                        ((var(--bear-speed) * 0.5) - var(--speed))))
                        calc((var(--bear-speed) * 0.5) * ((1 - var(--dark, 0)) * 0.4)) linear;
        translate:
                calc(
                        (0 - (1 - var(--dark, 0))) * (var(--width) + 100%)
                ) calc(
                (0 - (1 - var(--dark, 0))) * (200%)
        );
}

.pilot {
        rotate: 12deg;
        -webkit-animation: fly 4s infinite ease-in-out;
                animation: fly 4s infinite ease-in-out;
}

@-webkit-keyframes fly {
        50% { translate: 0 -25%; }
}

@keyframes fly {
        50% { translate: 0 -25%; }
}
</style>


  
</head>

<body>
  <button class="toggle" aria-pressed="false">
  <svg class="toggle__backdrop" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 290 228">
    <g class="clouds" clip-path="url(#a)">
      <path fill="#D9D9D9" d="M335 147.5c0 27.89-22.61 50.5-50.5 50.5a50.78 50.78 0 0 1-9.29-.853c-2.478 12.606-10.595 23.188-21.615 29.011C245.699 243.749 228.03 256 207.5 256a50.433 50.433 0 0 1-16.034-2.599A41.811 41.811 0 0 1 166 262a41.798 41.798 0 0 1-22.893-6.782A42.21 42.21 0 0 1 135 256a41.82 41.82 0 0 1-19.115-4.592A41.84 41.84 0 0 1 88 262c-1.827 0-3.626-.117-5.391-.343C74.911 270.448 63.604 276 51 276c-23.196 0-42-18.804-42-42s18.804-42 42-42c1.827 0 3.626.117 5.391.343C64.089 183.552 75.396 178 88 178a41.819 41.819 0 0 1 19.115 4.592C114.532 176.002 124.298 172 135 172a41.798 41.798 0 0 1 22.893 6.782 42.066 42.066 0 0 1 7.239-.773C174.137 164.159 189.749 155 207.5 155c.601 0 1.199.01 1.794.031A41.813 41.813 0 0 1 234 147h.002c.269-27.66 22.774-50 50.498-50 27.89 0 50.5 22.61 50.5 50.5Z" />
    </g>
  </svg>
  <span class="pilot__container">
    <span class="pilot-bear">
      <img src="https://assets.codepen.io/605876/pilot-bear.svg" alt="pilot-bear" class="pilot" />
    </span>
  </span>
  <svg class="toggle__backdrop" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 290 228">
    <g class="clouds" clip-path="url(#a)">
      <path fill="#fff" d="M328 167.5c0 15.214-7.994 28.56-20.01 36.068.007.31.01.621.01.932 0 23.472-19.028 42.5-42.5 42.5-3.789 0-7.461-.496-10.957-1.426C249.671 263.676 233.141 277 213.5 277a42.77 42.77 0 0 1-7.702-.696C198.089 284.141 187.362 289 175.5 289a42.338 42.338 0 0 1-27.864-10.408A42.411 42.411 0 0 1 133.5 281c-4.36 0-8.566-.656-12.526-1.876C113.252 287.066 102.452 292 90.5 292a42.388 42.388 0 0 1-15.8-3.034A42.316 42.316 0 0 1 48.5 298C25.028 298 6 278.972 6 255.5S25.028 213 48.5 213a42.388 42.388 0 0 1 15.8 3.034A42.316 42.316 0 0 1 90.5 207c4.36 0 8.566.656 12.526 1.876C110.74.........完整代码请登录后点击上方下载按钮下载查看