🎭 角色简介
“`yaml
char_name:斐临南
English name: Lin
Nickname: 临南（朋友），阿南（仅亲密的人喊），南南（仅{{user}}喊）
age: 20
gender: 男
height: 187
identity:电竞选手/主播，大…
💬 开场白
“`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>
/* — 淡粉色呼吸光晕动画 — */
@keyframes pulse-effect-pink {
0% {
box-shadow: 0 0 15px rgba(255, 209, 220, 0.4), 0 0 30px rgba(255, 175, 204, 0.2);
}
50% {
box-shadow: 0 0 25px rgba(255, 209, 220, 0.7), 0 0 50px rgba(255, 175, 204, 0.4);
}
100% {
box-shadow: 0 0 15px rgba(255, 209, 220, 0.4), 0 0 30px rgba(255, 175, 204, 0.2);
}
}/* — 主卡片容器 — */
.glowing-card-container-pink {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
padding: 20px;
border-radius: 16px;
border: 1px solid rgba(255, 209, 220, 0.4);
background-color: rgba(255, 240, 245, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 0 15px rgba(255, 209, 220, 0.4), 0 0 30px rgba(255, 175, 204, 0.2);
animation: pulse-effect-pink 4s infinite ease-in-out;
max-width: 500px;
margin: 20px auto;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 12px;
transition: all 0.3s ease;
}.glowing-card-container-pink:hover {
transform: translateY(-5px);
box-shadow: 0 0 30px rgba(255, 175, 204, 0.5);
}/* — 顶部信息区域 — */
.glowing-card-container-pink .info-section {
display: flex;
align-items: center;
gap: 15px;
}/* — 头像框 — */
.glowing-card-container-pink .avatar-frame {
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid rgba(255, 209, 220, 0.6);
background-color: rgba(255, 175, 204, 0.2);
flex-shrink: 0;
background-image: url('https://files.catbox.moe/s5dhq4.png');
background-size: cover;
background-position: center;
box-shadow: 0 0 10px rgba(255, 209, 220, 0.5);
transition: all 0.3s ease;
}.glowing-card-container-pink .avatar-frame:hover {
transform: scale(1.05);
box-shadow: 0 0 15px rgba(255, 175, 204, 0.7);
}/* — 气泡区域 — */
.glowing-card-container-pink .bubble-area {
flex-grow: 1;
padding: 10px 15px;
background-color: rgba(255, 175, 204, 0.15);
border-radius: 10px;
color: #5a3d5c;
font-size: 14px;
line-height: 1.5;
position: relative;
overflow: hidden;
}.glowing-card-container-pink .bubble-area::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(255, 209, 220, 0.1), rgba(255, 175, 204, 0.05));
z-index: 0;
}/* — 链接展示区域 — */
.glowing-card-container-pink .link-display-area {
padding: 10px 15px;
background-color: rgba(255, 175, 204, 0.1);
border: 1px solid rgba(255, 209, 220, 0.2);
border-radius: 8px;
color: #5a3d5c;
font-size: 12px;
position: relative;
overflow: hidden;
}.glowing-card-container-pink .link-display-area::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(255, 209, 220, 0.1), rgba(255, 175, 204, 0.05));
z-index: 0;
}.glowing-card-container-pink .link-display-area p {
margin: 0 0 8px 0;
text-align: center;
color: #5a3d5c;
position: relative;
z-index: 1;
}.glowing-card-container-pink .link-input {
width: 100%;
border: 1px solid rgba(255, 209, 220, 0.3);
background-color: rgba(255, 255, 255, 0.5);
color: #5a3d5c;
padding: 6px 10px;
border-radius: 6px;
font-size: 11px;
box-sizing: border-box;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}.glowing-card-container-pink .link-input:hover {
background-color: rgba(255, 255, 255, 0.7);
border-color: rgba(255, 175, 204, 0.5);
}.glowing-card-container-pink .link-input:focus {
outline: none;
box-shadow: 0 0 8px rgba(255, 175, 204, 0.5);
}/* — 中间的主要文字区域 — */
.glowing-card-container-pink .main-text-area {
padding: 5px 0;
display: flex;
flex-direction: column;
gap: 10px;
color: #5a3d5c;
position: relative;
}.glowing-card-container-pink .text-block {
font-size: 13px;
line-height: 1.6;
padding: 0 5px;
position: relative;
z-index: 1;
}.glowing-card-container-pink .dashed-divider {
border: none;
border-top: 1px dashed rgba(255, 209, 220, 0.5);
margin: 5px 0;
}/* — 音频播放器的包装容器 — */
.glowing-card-container-pink .audio-player-wrapper {
position: relative;
height: 30px;
border-radius: 15px;
background-color: rgba(255, 175, 204, 0.2);
padding: 0 5px;
box-sizing: border-box;
overflow: hidden;
}.glowing-card-container-pink .audio-player-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(255, 209, 220, 0.1), rgba(255, 175, 204, 0.05));
z-index: 0;
}.glowing-card-container-pink .audio-player {
width: 100%;
height: 100%;
opacity: 0.8;
filter: hue-rotate(-20deg) saturate(1.2) brightness(1.1);
position: relative;
z-index: 1;
}/* 美化音频控件 */
.glowing-card-container-pink .audio-player::-webkit-media-controls-panel {
background-color: rgba(255, 209, 220, 0.3);
border-radius: 15px;
}.glowing-card-container-pink .audio-player::-webkit-media-controls-play-button,
.glowing-card-container-pink .audio-player::-webkit-media-controls-mute-button {
background-color: rgba(255, 175, 204, 0.5);
border-radius: 50%;
}/* 响应式调整 */
@media (max-width: 520px) {
.glowing-card-container-pink {
max-width: 90%;
padding: 15px;
}.glowing-card-container-pink .info-section {
flex-direction: column;
align-items: flex-start;
}.glowing-card-container-pink .bubble-area {
width: 100%;
}
}
</style>
</head>
<body>
<div class="glowing-card-container-pink">
<!– 1. 顶部信息区 –>
<div class="info-section">
<div class="avatar-frame"></div>
<div class="bubble-area">小心烦⸝⸝ > ⌑ < ⸝⸝</div>
</div><!– 2. 卡展示区（实在不知道写啥） –>
<div class="link-display-area">
<p>我的卡→谢以声 | 肆衍【重置中】| 凌今安【重置中】 | 所有卡面禁止二传，商用，如果你是在除了酒馆以为保存的卡请到dc告诉我，蟹蟹！^v^</p>
<input class="link-input" type="text" value="1314520" readonly onclick="this.select(); document.execCommand('copy');">
</div><!– 3. 中间文字区 –>
<div class="main-text-area">
<div class="text-block">
我喜欢看repo！虽然不一定知道怎么回👉👈⁺⌯^·-·^⌯⁺<br>
卡面均为洁卡，我可以玩不洁卡，但我的卡必须是洁嘟<br>
喜欢的话记得多多repo哦 也可以提建议💝
</div>
<hr class="dashed-divider">
<div class="text-block">
开场白՞⩌⌯⩌՞
|开场白1：离别
| 开场白2：重逢
| 开场白3：记得所有人，唯独忘记了你
|开场白4：下完直播的某人来讨亲亲</div>
</div><!– 4. 下方音频播放器 –>
<div class="audio-player-wrapper">
<audio class="audio-player" controls loop autoplay src="https://files.catbox.moe/up9fno.mp3">
</audio>
</div>
</div><script>
// 添加复制成功提示
document.querySelector('.link-input').addEventListener('click', function() {
this.select();
document.execCommand('copy');// 创建复制成功提示
const notification = document.createElement('div');
notification.textContent = '🐧号已复制到剪贴板！';
notification.style.position = 'fixed';
notification.style.bottom = '20px';
notification.style.left = '50%';
notification.style.transform = 'translateX(-50%)';
notification.style.backgroundColor = 'rgba(255, 175, 204, 0.9)';
notification.style.color = '#5a3d5c';
notification.style.padding = '10px 20px';
notification.style.borderRadius = '20px';
notification.style.boxShadow = '0 4px 15px rgba(255, 175, 204, 0.4)';
notification.style.zIndex = '1000';
notification.style.transition = 'opacity 0.5s';
notification.style.opacity = '0';document.body.appendChild(notification);
// 显示通知
setTimeout(() => {
notification.style.opacity = '1';
}, 10);// 隐藏通知
setTimeout(() => {
notification.style.opacity = '0';
setTimeout(() => {
document.body.removeChild(notification);
}, 500);
}, 2000);
});
</script>
</body>
</html>
“`