知识卡片html5动态网页源码
以脑力劳动者的放松方式为主题，编写成html5动态网页源码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>脑力工作者高效恢复指南</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
font-family: 'Helvetica Neue', Arial, sans-serif;
padding: 20px;
}
.card {
width: 300px;
height: 400px;
perspective: 1000px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
padding: 25px;
display: flex;
flex-direction: column;
}
.card-front {
background: rgba(255, 255, 255, 0.95);
justify-content: center;
align-items: center;
text-align: center;
}
.card-back {
background: linear-gradient(45deg, #0f2027, #203a43, #2c5364);
color: white;
transform: rotateY(180deg);
overflow-y: auto;
}
h1 {
font-size: 28px;
margin-bottom: 20px;
background: linear-gradient(45deg, #ff7e5f, #feb47b);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
}
.logo {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #43cea2, #185a9d);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.logo span {
font-size: 40px;
color: white;
font-weight: bold;
}
.tagline {
font-size: 16px;
color: #555;
margin-top: 15px;
font-weight: 300;
}
.tip-list {
list-style: none;
}
.tip-list li {
padding: 15px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
animation: fadeIn 0.5s forwards;
opacity: 0;
}
.tip-list li:last-child {
border-bottom: none;
}
.tip-list li:nth-child(1) { animation-delay: 0.1s; }
.tip-list li:nth-child(2) { animation-delay: 0.3s; }
.tip-list li:nth-child(3) { animation-delay: 0.5s; }
.tip-list li:nth-child(4) { animation-delay: 0.7s; }
.tip-list li:nth-child(5) { animation-delay: 0.9s; }
@keyframes fadeIn {
to { opacity: 1; }
}
.tip-title {
font-weight: 600;
margin-bottom: 5px;
color: #43cea2;
font-size: 18px;
}
.tip-content {
font-size: 14px;
line-height: 1.5;
color: #e0e0e0;
}
.follow {
position: absolute;
bottom: 20px;
width: calc(100% - 50px);
text-align: center;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body>
<div class="card">
<div class="card-inner">
<div class="card-face card-front">
<div class="logo">
<span>⚡</span>
</div>
<h1>高效恢复指南</h1>
<p class="tagline">脑力工作者的能量再生术</p>
</div>
<div class="card-face card-back">
<h1>高效恢复五法则</h1>
<ul class="tip-list">
<li>
<div class="tip-title">节奏性休息</div>
<div class="tip-content">每专注90分钟强制休息15分钟，保持大脑节律</div>
</li>
<li>
<div class="tip-title">微运动激活</div>
<div class="tip-content">3分钟深蹲/拉伸，重启身体能量循环系统</div>
</li>
<li>
<div class="tip-title">感官切换术</div>
<div class="tip-content">闭眼聆听自然声，视觉→听觉模式转换</div>
</li>
<li>
<div class="tip-title">深度呼吸法</div>
<div class="tip-content">4-7-8呼吸：吸气4秒→屏息7秒→呼气8秒</div>
</li>
<li>
<div class="tip-title">碎片冥想</div>
<div class="tip-content">5分钟正念冥想，清空思维缓存区</div>
</li>
</ul>
<div class="follow">关注获取更多脑科学干货</div>
</div>
</div>
</div>
</body>
</html>