HTML&CSS：网页设计必备！天气开关

玄之 · 发表于 4 天前

这段代码实现了一个动态的天气开关组件，通过CSS的伪元素、过渡效果和SVG图标，增强了视觉效果和用户交互体验。

演示效果

HTML&CSS

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            background: #E8EBF3;
            height: 100vh;
            font: 400 16px 'Poppins', sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .switch {
            font-size: 17px;
            position: relative;
            display: inline-block;
            width: 4em;
            height: 2.2em;
            border-radius: 30px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #2a2a2a;
            transition: 0.4s;
            border-radius: 30px;
            overflow: hidden;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 1.2em;
            width: 1.2em;
            border-radius: 20px;
            left: 0.5em;
            bottom: 0.5em;
            transition: 0.4s;
            transition-timing-function: cubic-bezier(0.81, -0.04, 0.38, 1.5);
            box-shadow: inset 8px -4px 0px 0px #fff;
        }

        .switch input:checked+.slider {
            background-color: #00a6ff;
        }

        .switch input:checked+.slider:before {
            transform: translateX(1.8em);
            box-shadow: inset 15px -4px 0px 15px #ffcf48;
        }

        .star {
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            width: 5px;
            transition: all 0.4s;
            height: 5px;
        }

        .star_1 {
            left: 2.5em;
            top: 0.5em;
        }

        .star_2 {
            left: 2.2em;
            top: 1.2em;
        }

        .star_3 {
            left: 3em;
            top: 0.9em;
        }

        .switch input:checked~.slider .star {
            opacity: 0;
        }

        .cloud {
            width: 3.5em;
            position: absolute;
            bottom: -1.4em;
            left: -1.1em;
            opacity: 0;
            transition: all 0.4s;
        }

        .switch input:checked~.slider .cloud {
            opacity: 1;
        }
    </style>
</head>

<body>
    <label class="switch">
        <input checked="true" id="checkbox" type="checkbox" />
        <span class="slider">
            <div class="star star_1"></div>
            <div class="star star_2"></div>
            <div class="star star_3"></div>
            <svg viewBox="0 0 16 16" class="cloud_1 cloud">
                <path transform="matrix(.77976 0 0 .78395-299.99-418.63)" fill="#fff"
                    d="m391.84 540.91c-.421-.329-.949-.524-1.523-.524-1.351 0-2.451 1.084-2.485 2.435-1.395.526-2.388 1.88-2.388 3.466 0 1.874 1.385 3.423 3.182 3.667v.034h12.73v-.006c1.775-.104 3.182-1.584 3.182-3.395 0-1.747-1.309-3.186-2.994-3.379.007-.106.011-.214.011-.322 0-2.707-2.271-4.901-5.072-4.901-2.073 0-3.856 1.202-4.643 2.925">
                </path>
            </svg>
        </span>
    </label>
</body>
</html>

HTML 结构

switch：定义一个开关组件的容器，包含一个复选框和一个滑块。
checkbox：定义一个复选框，用于控制开关的状态。
slider：定义滑块的样式，包含三个星星和一个云朵图标。
star：定义星星的样式，分别通过star_1、star_2和star_3定位。
cloud：定义云朵的SVG图标，使用绘制形状。

CSS 样式

body：设置页面的整体布局，背景颜色为#E8EBF3，高度为100vh，字体为’Poppins’, sans-serif，并使用flex布局居中对齐内容。
.switch：定义开关组件的样式，宽度为4em，高度为2.2em，圆角为30px，并添加阴影效果。
.switch input：设置复选框为不可见，透明度为0，宽度和高度为0。
.slider：定义滑块的样式，绝对定位，覆盖整个开关区域，背景颜色为#2a2a2a，过渡效果为0.4s。
.slider:before：定义滑块内部圆点的样式，高度和宽度为1.2em，圆角为20px，初始位置为左0.5em，底部0.5em，并添加阴影效果。
.switch input:checked + .slider：当复选框被选中时，滑块背景颜色变为#00a6ff。
.switch input:checked + .slider:before：当复选框被选中时，滑块圆点向右移动1.8em，并更改阴影效果为inset 15px -4px 0px 15px #ffcf48。
.star：定义星星的样式，背景颜色为#fff，圆角为50%，宽度和高度为5px，过渡效果为0.4s。
.star_1：定义第一个星星的位置，左2.5em，顶部0.5em。
.star_2：定义第二个星星的位置，左2.2em，顶部1.2em。
.star_3：定义第三个星星的位置，左3em，顶部0.9em。
.switch input:checked ~ .slider .star：当复选框被选中时，星星的透明度变为0。
.cloud：定义云朵的样式，宽度为3.5em，绝对定位，初始透明度为0，过渡效果为0.4s。
.switch input:checked ~ .slider .cloud：当复选框被选中时，云朵的透明度变为1。

[代码特效] HTML&CSS：网页设计必备！天气开关

免责声明

回复

最佳新人

荣誉管理

灌水之王

宣传达人

2025蛇年限定

活跃会员

突出贡献

关于我们

热门板块

jiubbs2025@163.com