创意开关动画，主题切换新体验！

效果演示

这是一个具有动画效果的开关组件，用户可以通过点击来触发太阳和月亮图标的动画效果，可用于主题切换。

HTML

<label class="switch">
    <span class="sun">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <g fill="#ffd43b">
                <circle r="5" cy="12" cx="12"></circle>
                <path
                    d="m21 13h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm-17 0h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm13.66-5.66a1 1 0 0 1 -.66-.29 1 1 0 0 1 0-1.41l.71-.71a1 1 0 1 1 1.41 1.41l-.71.71a1 1 0 0 1 -.75.29zm-12.02 12.02a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.41l.71-.66a1 1 0 0 1 1.41 1.41l-.71.71a1 1 0 0 1 -.7.24zm6.36-14.36a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm0 17a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm-5.66-14.66a1 1 0 0 1 -.7-.29l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.29zm12.02 12.02a1 1 0 0 1 -.7-.29l-.66-.71a1 1 0 0 1 1.36-1.36l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.24z">
                </path>
            </g>
        </svg>
    </span>
    <span class="moon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
            <path
                d="m223.5 32c-123.5 0-223.5 100.3-223.5 224s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z">
            </path>
        </svg>
    </span>
    <input type="checkbox" class="input">
    <span class="slider"></span>
</label>

• label标签包裹整个开关组件，点击label可以触发内部的checkbox。
• span.sun和span.moon分别包含太阳和月亮的SVG图标。
• input[type="checkbox"]是一个隐藏的复选框，用于控制开关状态。
• span.slider是开关的滑块部分。

CSS

.switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 64px;
    height: 34px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #73C0FC;
    transition: .4s;
    border-radius: 30px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 30px;
    width: 30px;
    border-radius: 20px;
    left: 2px;
    bottom: 2px;
    z-index: 2;
    background-color: #e8e8e8;
    transition: .4s;
}
.sun svg {
    position: absolute;
    top: 6px;
    left: 36px;
    z-index: 1;
    width: 24px;
    height: 24px;
}
.moon svg {
    fill: #73C0FC;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;
    width: 24px;
    height: 24px;
}
.sun svg {
    animation: rotate 15s linear infinite;
}
@keyframes rotate {

    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}
.moon svg {
    animation: tilt 5s linear infinite;
}
@keyframes tilt {

    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}
.input:checked+.slider {
    background-color: #183153;
}
.input:focus+.slider {
    box-shadow: 0 0 1px #183153;
}
.input:checked+.slider:before {
    transform: translateX(30px);
}

• switch定义了开关的基本样式，包括大小、位置和边框圆角。
• switch input隐藏了复选框，使其不可见。
• slider定义了滑块的样式，包括背景颜色、光标样式和过渡效果。
• slider:before定义了滑块前面的圆形部分，用于指示开关的状态。
• sun svg和.moon svg分别定义了太阳和月亮图标的样式和位置。
• @keyframes rotate和@keyframes tilt定义了太阳和月亮图标的动画效果。
• input:checked+.slider和.input:focus+.slider定义了开关选中状态和聚焦状态的样式。
• input:checked+.slider:before定义了开关选中时滑块前面圆形部分的位置变化。