知识卡片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>