HTML&CSS ：惊艳！日夜切换卡片

玄之 · 发表于 2025-2-28 20:31:13

段代码是一个 HTML 页面，它包含 CSS 样式和一个简单的开关（toggle）功能，用于在“白天”和“黑夜”模式之间切换。页面显示了一个带有时间、日期和天气信息的卡片，以及一个圆形的背景。

演示效果

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 {
            margin: 0;
            padding: 0;
            background: #e8e8e8;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .app {
            --light-col: #e8e8e8;
            --dark-col: #26242e;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 35px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 1;
            width: 18rem;
            height: 18rem;
            background-color: #e8e8e8;
            border-radius: 30px;
            overflow: hidden;
            user-select: none;
        }

        .app::before {
            --dimension: 50px;
            content: "";
            width: var(--dimension);
            height: var(--dimension);
            border-radius: 50%;
            background: #26242e;
            position: absolute;
            top: calc(50% - (var(--dimension) / 2));
            left: calc(50% - (var(--dimension)) / 2);
            display: block;
            box-shadow: 0px 0px 0 0px var(--dark-col);
            z-index: -1;
            transition: 400ms ease-out;
        }

        nav {
            display: flex;
            justify-content: space-around;
            padding: 20px 0 0;
            width: 100%;
        }

        .time {
            font-size: 14px;
        }

        .wet {
            font-size: 14px;
        }

        .week {
            font-size: 14px;
        }

        .circle {
            position: relative;
            border-radius: 100%;
            width: 8rem;
            height: 8rem;
            background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
            margin: auto;
        }

        .circle::before {
            content: "";
            position: absolute;
            border-radius: 50%;
            right: 0;
            width: 6rem;
            height: 6rem;
            z-index: 1;
            background: var(--bg);
            transform: scale(0);
            transform-origin: top right;
            transition: 450ms;
        }

        label {
            width: auto;
            margin: 20px 30px;
            padding: 15px 35px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50px;
            position: relative;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: bolder;
            color: var(--dark-col);
            display: flex;
            justify-content: space-between;
        }

        label::before {
            content: "";
            position: absolute;
            width: 50%;
            inset: 0;
            border-radius: inherit;
            display: block;
            z-index: -1;
            background-color: #fff;
            -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
            -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            transition:
                transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        [type="checkbox"] {
            appearance: none;
        }

        [type="checkbox"]:checked+.app label span.light {
            color: var(--light-col);
        }

        [type="checkbox"]:checked+.app label::before {
            transform: translateX(100%);
        }

        [type="checkbox"]:checked+.app::before {
            box-shadow: 0px 0px 0 150px var(--dark-col);
        }

        [type="checkbox"]:checked+.app .circle::before {
            transform: scale(1);
            background: var(--dark-col);
        }

        [type="checkbox"]:checked+.app .circle {
            background: linear-gradient(40deg, #8983f7, #a3dafb 70%);
        }

        [type="checkbox"]:checked+.app .time {
            color: var(--light-col);
            font-size: 14px;
        }

        [type="checkbox"]:checked+.app .icons .week {
            color: var(--light-col);
            font-size: 14px;
        }

        [type="checkbox"]:checked+.app .icons .wet {
            color: var(--light-col);
            font-size: 14px;
        }
    </style>
</head>

<body>
    <input id="switch" type="checkbox" />
    <div class="app">
        <nav>
            <div class="time">2025/2/8 12:00</div>
            <div class="icons">
                <span class="week">六</span>
                <span class="wet">🌤</span>
            </div>
        </nav>
        <div class="circle"></div>
        <label for="switch">
            <span class="light">白天</span>
            <span>黑夜</span>
        </label>
    </div>

</body>

</html>

[代码特效] HTML&CSS ：惊艳！日夜切换卡片

免责声明

回复

最佳新人

荣誉管理

灌水之王

宣传达人

2025蛇年限定

活跃会员

突出贡献

关于我们

热门板块

jiubbs2025@163.com