HTML&CSS ：惊艳！日夜切换卡片
<p>这段代码是一个 HTML 页面，它包含 CSS 样式和一个简单的开关（toggle）功能，用于在“白天”和“黑夜”模式之间切换。页面显示了一个带有时间、日期和天气信息的卡片，以及一个圆形的背景。</p><hr />
<h2>演示效果</h2>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_gif/vAEun6t7Odib6o1ibgE7SAbv6ibIOLe1OCE0zWf23xT8tj5xibaEmQFxrg6T6AwTuDOLDyApz781TlY92F6wArPskQ/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>HTML&CSS</h2>
<pre><code><!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: 04px35pxrgba(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: 0px0px00pxvar(--dark-col);
z-index: -1;
transition: 400ms ease-out;
}
nav {
display: flex;
justify-content: space-around;
padding: 20px00;
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: 20px30px;
padding: 15px35px;
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: 02px15pxrgba(0, 0, 0, 0.15);
box-shadow: 02px15pxrgba(0, 0, 0, 0.15);
-webkit-transition: -webkit-transform 0.3scubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: -webkit-transform 0.3scubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: transform 0.3scubic-bezier(0.25, 0.46, 0.45, 0.94);
transition:
transform 0.3scubic-bezier(0.25, 0.46, 0.45, 0.94),
-webkit-transform 0.3scubic-bezier(0.25, 0.46, 0.45, 0.94);
}
{
appearance: none;
}
:checked+.applabelspan.light {
color: var(--light-col);
}
:checked+.applabel::before {
transform: translateX(100%);
}
:checked+.app::before {
box-shadow: 0px0px0150pxvar(--dark-col);
}
:checked+.app.circle::before {
transform: scale(1);
background: var(--dark-col);
}
:checked+.app.circle {
background: linear-gradient(40deg, #8983f7, #a3dafb 70%);
}
:checked+.app.time {
color: var(--light-col);
font-size: 14px;
}
:checked+.app.icons.week {
color: var(--light-col);
font-size: 14px;
}
: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>
</code></pre>
<h2>HTML 结构</h2>
<ul>
<li>switch: 创建一个复选框，用于切换模式。</li>
<li>app: 创建一个类名为“app”的 div 元素，用于包含卡片内容。</li>
<li>nav: 包含时间、日期和天气信息。</li>
<li>time: 显示时间。</li>
<li>icons: 包含日期和天气信息。</li>
<li>week: 显示星期。</li>
<li>wet: 显示天气图标。</li>
<li>circle: 创建一个圆形的背景。</li>
<li>switch: 创建一个标签，用于切换模式。</li>
<li>light: 显示“白天”文本。</li>
<li>span: 显示“黑夜”文本。</li>
</ul>
<h2>CSS 样式</h2>
<ul>
<li>body: 设置页面的边距、填充、背景色、显示方式和对齐方式。</li>
<li>.app: 设置卡片的样式，包括显示方式、布局、阴影、位置、尺寸、背景色、圆角和溢出隐藏。</li>
<li>.app::before: 设置卡片的伪元素，用于创建动态背景效果。</li>
<li>nav: 设置导航栏的样式，包括显示方式、对齐方式和内边距。</li>
<li>.time, .wet, .week: 设置时间、日期和天气信息的样式，包括字体大小。</li>
<li>.circle: 设置圆形背景的样式，包括位置、尺寸、背景渐变和圆角。</li>
<li>.circle::before: 设置圆形背景的伪元素，用于创建动态效果。</li>
<li>label: 设置切换模式的标签样式，包括尺寸、内边距、背景色、圆角、位置、光标、字体大小和权重。</li>
<li>label::before: 设置标签的伪元素，用于创建动态效果。</li>
<li>checkbox: 设置复选框的样式，隐藏默认的复选框外观。</li>
<li>checkbox:checked+...: 设置复选框被选中时的样式，包括背景色、文字颜色和动态</li>
</ul>
页:
[1]