🎭 角色简介
# uid: character_key_character_gu_yun_ci
# trigger: 完整卷宗 – 顾云辞
basic_info:
character_name: "顾云辞"
character_id: "gu_yunci"
category: "key_ch…
💬 开场白
“`html
<!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>
@import url("https://fontsapi.zeoseven.com/6/main/result.css");* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
background: linear-gradient(135deg, #f9f3e9 0%, #f5ead8 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
font-family: "XuandongKaishu", serif;
color: #4a3c31;
position: relative;
overflow-x: hidden;
}/* 背景装饰元素 */
.background-decoration {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: 0;
}.decoration-corner {
position: absolute;
width: 120px;
height: 120px;
opacity: 0.1;
}.corner-tl {
top: 20px;
left: 20px;
border-top: 3px solid #8c6d46;
border-left: 3px solid #8c6d46;
}.corner-tr {
top: 20px;
right: 20px;
border-top: 3px solid #8c6d46;
border-right: 3px solid #8c6d46;
}.corner-bl {
bottom: 20px;
left: 20px;
border-bottom: 3px solid #8c6d46;
border-left: 3px solid #8c6d46;
}.corner-br {
bottom: 20px;
right: 20px;
border-bottom: 3px solid #8c6d46;
border-right: 3px solid #8c6d46;
}.decoration-line {
position: absolute;
height: 1px;
width: 80%;
background: linear-gradient(90deg, transparent, #8c6d46, transparent);
left: 10%;
opacity: 0.15;
}.line-top {
top: 15%;
}.line-bottom {
bottom: 15%;
}/* 主容器 */
.ancient-home-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 30px;
background-color: #fdfaef;
border: 1px solid #dcd3c5;
border-radius: 16px;
font-family: "XuandongKaishu", serif;
font-weight: normal;
text-align: center;
max-width: 700px;
width: 100%;
margin: 20px auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
overflow: hidden;
z-index: 1;
}/* 标题装饰 */
.title-decoration {
width: 80%;
height: 2px;
background: linear-gradient(90deg, transparent, #8c6d46, transparent);
margin: 10px 0 25px 0;
opacity: 0.6;
}.content-wrapper {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}.ancient-home-title {
font-size: 2.2em;
color: #4a3c31;
margin-bottom: 15px;
letter-spacing: 0.1em;
line-height: 1.4;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
position: relative;
padding: 0 10px;
}.video-container-wrapper {
position: relative;
width: 320px;
height: 320px;
overflow: hidden;
border-radius: 50%;
margin: 25px 0;
background-color: #000;
box-shadow: 0 0 0 8px #fdfaef, 0 0 0 10px #dcd3c5, 0 10px 25px rgba(0, 0, 0, 0.2);
transition: transform 0.5s ease;
}.video-container-wrapper:hover {
transform: scale(1.02);
}.embedded-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
filter: brightness(1.05) contrast(1.05);
}.author-credit {
font-size: 1em;
color: #9a8c81;
margin-top: 15px;
padding: 8px 20px;
border-top: 1px solid #e8dfd1;
border-bottom: 1px solid #e8dfd1;
letter-spacing: 0.05em;
}/* 花瓣飘落效果 */
.petal-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}.petal {
position: absolute;
background-color: rgba(255, 183, 197, 0.7);
border-radius: 50% 0;
width: 15px;
height: 10px;
opacity: 0;
animation: fall linear infinite;
}@keyframes fall {
0% {
transform: translateY(-20px) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(calc(100vh + 20px)) rotate(360deg);
opacity: 0;
}
}/* 为每片花瓣设置不同的动画延迟、时长和水平位置 */
.petal:nth-child(1) { left: 10%; animation-duration: 15s; animation-delay: -5s; }
.petal:nth-child(2) { left: 20%; animation-duration: 10s; animation-delay: -1s; width: 10px; height: 7px; }
.petal:nth-child(3) { left: 30%; animation-duration: 20s; animation-delay: -8s; }
.petal:nth-child(4) { left: 40%; animation-duration: 12s; animation-delay: -3s; width: 18px; height: 12px; }
.petal:nth-child(5) { left: 50%; animation-duration: 18s; animation-delay: -10s; }
.petal:nth-child(6) { left: 60%; animation-duration: 9s; animation-delay: -2s; }
.petal:nth-child(7) { left: 70%; animation-duration: 16s; animation-delay: -6s; width: 12px; height: 8px; }
.petal:nth-child(8) { left: 80%; animation-duration: 11s; animation-delay: -4s; }
.petal:nth-child(9) { left: 90%; animation-duration: 19s; animation-delay: -9s; }
.petal:nth-child(10) { left: 15%; animation-duration: 14s; animation-delay: -7s; }
.petal:nth-child(11) { left: 75%; animation-duration: 13s; animation-delay: -2.5s; width: 16px; height: 11px; }
.petal:nth-child(12) { left: 45%; animation-duration: 17s; animation-delay: -1.5s; }/* 响应式设计 */
@media (max-width: 768px) {
.ancient-home-container {
padding: 30px 20px;
max-width: 90%;
}.ancient-home-title {
font-size: 1.8em;
}.video-container-wrapper {
width: 280px;
height: 280px;
}.decoration-corner {
width: 80px;
height: 80px;
}
}@media (max-width: 480px) {
.ancient-home-title {
font-size: 1.5em;
}.video-container-wrapper {
width: 240px;
height: 240px;
}.author-credit {
font-size: 0.9em;
}
}
</style>
</head>
<body>
<!– 背景装饰 –>
<div class="background-decoration">
<div class="decoration-corner corner-tl"></div>
<div class="decoration-corner corner-tr"></div>
<div class="decoration-corner corner-bl"></div>
<div class="decoration-corner corner-br"></div>
<div class="decoration-line line-top"></div>
<div class="decoration-line line-bottom"></div>
</div><!– 主容器 –>
<div class="ancient-home-container">
<!– 花瓣飘落效果 –>
<div class="petal-container">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div><!– 内容区域 –>
<div class="content-wrapper">
<div class="ancient-home-title">
一剑凌霜辞云去<br>
此心归处红尘里
</div><div class="title-decoration"></div>
<div class="video-container-wrapper">
<video class="embedded-video" src="https://files.catbox.moe/ei6htm.mp4" autoplay loop muted playsinline></video>
</div><div class="author-credit">作者：三三不是了了啊</div>
</div>
</div><script>
// 添加页面加载载后的微交互
document.addEventListener('DOMContentLoaded', function() {
const container = document.querySelector('.ancient-home-container');// 添加淡入效果
container.style.opacity = '0';
container.style.transform = 'translateY(20px)';setTimeout(() => {
container.style.transition = 'opacity 1s ease, transform 1s ease';
container.style.opacity = '1';
container.style.transform = 'translateY(0)';
}, 300);// 添加鼠标悬停效果到视频容器
const videoWrapper = document.querySelector('.video-container-wrapper');
videoWrapper.addEventListener('mouseenter', function() {
this.style.boxShadow = '0 0 0 8px #fdfaef, 0 0 0 10px #dcd3c5, 0 15px 35px rgba(0, 0, 0, 0.25)';
});videoWrapper.addEventListener('mouseleave', function() {
this.style.boxShadow = '0 0 0 8px #fdfaef, 0 0 0 10px #dcd3c5, 0 10px 25px rgba(0, 0, 0, 0.2)';
});
});
</script>
</body>
</html>
“`