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

玄之 · 发表于昨天 20:31

段代码是一个 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蛇年限定

活跃会员

突出贡献

关于我们

服务支持

foxccs@qq.com