精挑细选12首
本帖最后由 杨帆 于 2026-2-5 00:42 编辑 <br /><br /><!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>精挑细选12首</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#pa{margin:30px auto;position:relative;display:grid;place-items:center;width:1280px;height:780px;left:calc(50% - 100px);transform:translateX(-50%);border:1px solid gray;overflow:hidden;background:url('https://pic.imgdb.cn/item/6747df64d0e0a243d4d83f53.png') no-repeat center/cover;z-index:1;user-drag:none;user-select:none;--state:running;}
#wrapper{position:absolute;padding:0px;color:#00aa00;font-size:2.8rem;font-family:"Ma Shan Zheng","SimHei",cursive;font-weight:bold;white-space:nowrap;filter:drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);text-align:center;top:85%;z-index:9;writing-mode:horizontal-tb;}
.vertical-lrc{writing-mode:vertical-lr !important;top:60% !important;left:8% !important;transform:translate(-50%, -50%);height:80% !important;width:auto !important;}
.calendar-container{position:relative;width:246px;height:346px;perspective:800px;z-index:12;margin:60px auto 0;transition:transform 0.3s ease;}
.calendar-container:hover{transform:scale(1.02);}
.calendar-container:hover .calendar-page{animation-play-state:paused !important;}
.calendar{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(10deg) rotateY(0deg);box-shadow:0 15px 35px rgba(0,0,0,0.5);border-radius:8px;overflow:visible;}
.calendar-page{position:absolute;width:100%;height:100%;background:white;border-radius:8px;transform-origin:top center;backface-visibility:hidden;overflow:hidden;transform:rotateX(0deg);background-image:linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);background-size:20px 20px;opacity:0.9;animation-play-state:var(--state);}
.page-content{width:100%;height:100%;padding:12px;box-sizing:border-box;position:relative;background:linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);}
.month-title{font-size:1.76em;font-weight:bold;text-align:center;margin-top:12px;margin-bottom:4px;color:#d32f2f;text-shadow:2px 2px 4px rgba(0,0,0,0.1);font-family:"Microsoft YaHei", sans-serif;}
.year-title{font-size:0.96em;text-align:center;color:#555;margin-bottom:16px;font-weight:normal;border-bottom:2px solid #d32f2f;padding-bottom:5px;width:80%;margin-left:auto;margin-right:auto;}
.date-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:4px;margin-top:12px;}
.day-header{font-weight:bold;color:#666;text-align:center;font-size:0.64em;padding:2px 0;border-bottom:1px solid #ddd;}
.date-cell{text-align:center;padding:4px 0;font-size:0.64em;color:#333;border-radius:4px;transition:all 0.3s;}
.date-cell.weekend{color:#d32f2f;}
.date-cell.today{background:#d32f2f;color:white;font-weight:bold;transform:scale(1.05);}
.date-cell.other-month{color:#aaa;}
.page-number{position:absolute;bottom:8px;right:12px;font-size:0.56em;color:#888;}
.calendar-top{height:10px;background:#d32f2f;border-radius:8px 8px 0 0;position:relative;}
.calendar-top::after{content:'';position:absolute;width:100%;height:4px;background:#b71c1c;bottom:0;left:0;}
.calendar-hanger{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:38px;height:16px;background:#b71c1c;border-radius:19px 19px 0 0;z-index:13;}
.calendar-hanger::before{content:'';position:absolute;width:100%;height:5px;background:#8c1b1b;border-radius:3px;bottom:0;}
@keyframes pageFlip1{0%{transform:rotateX(0deg);z-index:12;}8%{transform:rotateX(90deg);z-index:13;}8.1%{transform:rotateX(90deg);z-index:1;}8.2%{transform:rotateX(-90deg);z-index:1;}100%{transform:rotateX(-90deg);z-index:1;}}
@keyframes pageFlip2{0%,8%{transform:rotateX(0deg);z-index:11;}16%{transform:rotateX(90deg);z-index:13;}16.1%{transform:rotateX(90deg);z-index:2;}16.2%{transform:rotateX(-90deg);z-index:2;}100%{transform:rotateX(-90deg);z-index:2;}}
@keyframes pageFlip3{0%,16%{transform:rotateX(0deg);z-index:10;}24%{transform:rotateX(90deg);z-index:13;}24.1%{transform:rotateX(90deg);z-index:3;}24.2%{transform:rotateX(-90deg);z-index:3;}100%{transform:rotateX(-90deg);z-index:3;}}
@keyframes pageFlip4{0%,24%{transform:rotateX(0deg);z-index:9;}32%{transform:rotateX(90deg);z-index:13;}32.1%{transform:rotateX(90deg);z-index:4;}32.2%{transform:rotateX(-90deg);z-index:4;}100%{transform:rotateX(-90deg);z-index:4;}}
@keyframes pageFlip5{0%,32%{transform:rotateX(0deg);z-index:8;}40%{transform:rotateX(90deg);z-index:13;}40.1%{transform:rotateX(90deg);z-index:5;}40.2%{transform:rotateX(-90deg);z-index:5;}100%{transform:rotateX(-90deg);z-index:5;}}
@keyframes pageFlip6{0%,40%{transform:rotateX(0deg);z-index:7;}48%{transform:rotateX(90deg);z-index:13;}48.1%{transform:rotateX(90deg);z-index:6;}48.2%{transform:rotateX(-90deg);z-index:6;}100%{transform:rotateX(-90deg);z-index:6;}}
@keyframes pageFlip7{0%,48%{transform:rotateX(0deg);z-index:6;}56%{transform:rotateX(90deg);z-index:13;}56.1%{transform:rotateX(90deg);z-index:7;}56.2%{transform:rotateX(-90deg);z-index:7;}100%{transform:rotateX(-90deg);z-index:7;}}
@keyframes pageFlip8{0%,56%{transform:rotateX(0deg);z-index:5;}64%{transform:rotateX(90deg);z-index:13;}64.1%{transform:rotateX(90deg);z-index:8;}64.2%{transform:rotateX(-90deg);z-index:8;}100%{transform:rotateX(-90deg);z-index:8;}}
@keyframes pageFlip9{0%,64%{transform:rotateX(0deg);z-index:4;}72%{transform:rotateX(90deg);z-index:13;}72.1%{transform:rotateX(90deg);z-index:9;}72.2%{transform:rotateX(-90deg);z-index:9;}100%{transform:rotateX(-90deg);z-index:9;}}
@keyframes pageFlip10{0%,72%{transform:rotateX(0deg);z-index:3;}80%{transform:rotateX(90deg);z-index:13;}80.1%{transform:rotateX(90deg);z-index:10;}80.2%{transform:rotateX(-90deg);z-index:10;}100%{transform:rotateX(-90deg);z-index:10;}}
@keyframes pageFlip11{0%,80%{transform:rotateX(0deg);z-index:2;}88%{transform:rotateX(90deg);z-index:13;}88.1%{transform:rotateX(90deg);z-index:11;}88.2%{transform:rotateX(-90deg);z-index:11;}100%{transform:rotateX(-90deg);z-index:11;}}
@keyframes pageFlip12{0%,88%{transform:rotateX(0deg);z-index:1;}96%{transform:rotateX(90deg);z-index:13;}96.1%{transform:rotateX(90deg);z-index:12;}97%{transform:rotateX(-90deg);z-index:12;}99%{transform:rotateX(-10deg);z-index:12;}100%{transform:rotateX(0deg);z-index:12;}}
.calendar-page:nth-child(1){animation:pageFlip1 52s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--state);}
.calendar-page:nth-child(2){animation:pageFlip2 52s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--state);}
.calendar-page:nth-child(3){animation:pageFlip3 52s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--state);}
.calendar-page:nth-child(4){animation:pageFlip4 52s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--state);}
.calendar-page:nth-child(5){animation:pageFlip5 52s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--state);}
.calendar-page:nth-child(6){animation:pageFlip6 52s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--state);}
.calendar-page:nth-child(7){animation:pageFlip7 52s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--state);}
.calendar-page:nth-child(8){animation:pageFlip8 52s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--state);}
.calendar-page:nth-child(9){animation:pageFlip9 52s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--state);}
.calendar-page:nth-child(10){animation:pageFlip10 52s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--state);}
.calendar-page:nth-child(11){animation:pageFlip11 52s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--state);}
.calendar-page:nth-child(12){animation:pageFlip12 52s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--state);}
@media (max-width:768px){.calendar-container{margin-top:40px;}}
#mydiv{position:absolute;top:150px;right:150px;z-index:10;width:80px;height:80px;display:grid;place-items:center;animation:rot 5s linear infinite var(--state);transition:opacity 0.3s, background 0.3s, border 0.3s;cursor:pointer;pointer-events:auto;}
#mydiv:hover{animation-play-state:paused !important;}
#mydiv > span{position:absolute;width:60%;height:60%;background:linear-gradient(75deg, #F5F5F5 10%, #E63946, #C1121F, #6B0F1A, #3D070B);border-radius:50% 0 60% 20%;transform:rotate(var(--deg)) translate(18px, -55%);}
#mydiv > span:nth-of-type(1){--deg:0deg;}
#mydiv > span:nth-of-type(2){--deg:72deg;}
#mydiv > span:nth-of-type(3){--deg:144deg;}
#mydiv > span:nth-of-type(4){--deg:216deg;}
#mydiv > span:nth-of-type(5){--deg:288deg;}
#mydiv:hover > span{opacity:0.9;}
@keyframes rot{to{transform:rotate(1turn);}}
#fullscreen{position:absolute;top:50px;right:30px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;z-index:10;}
#fullscreen:hover{font-style:italic;}
.carousel-img{position:absolute;width:100%;height:100%;display:block;z-index:2;}
.char{display:inline-block;padding:2px 2px;opacity:0;color:#00aa00;transform:translate(var(--x), var(--y));animation:fadeIn 1.5s var(--delay) forwards var(--state),flash 1s infinite alternate var(--state);}
@keyframes fadeIn{to{transform:scale(1);opacity:1;}}
@keyframes flash{to{filter:hue-rotate(360deg) brightness(60%);}}
#pa:hover #he,#pa:hover #prev-song,#pa:hover #next-song{opacity:1;z-index:10;}
#he:hover,#prev-song:hover,#next-song:hover{scale:1.05;translate:-1px 1px;}
#he{position:absolute;display:grid;place-items:center;border-radius:4px;color:#fff;background:transparent;box-shadow:0px 0px 0px 1px #fff;padding:4px 2px;width:70px;height:20px;font-size:15px;cursor:pointer;pointer-events:auto;bottom:30px;left:85%;z-index:10;transition:transform 0.3s;opacity:1;}
#prev-song,#next-song{position:absolute;display:grid;place-items:center;border-radius:4px;color:#fff;background:transparent;box-shadow:0px 0px 0px 1px #fff;padding:4px 2px;width:70px;height:20px;font-size:15px;cursor:pointer;pointer-events:auto;bottom:30px;z-index:10;transition:transform 0.3s;opacity:1;}
#prev-song{left:78%;}
#next-song{left:92%;}
#play-status{position:absolute;top:30px;left:50px;color:#ffffff;font:normal 1.5em 华文隶书;filter:drop-shadow(0 0 5px #ff0000);z-index:10;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.status-item{display:flex;align-items:center;gap:10px;}
.status-label{color:#ffff00;}
.status-value{color:#00ff9d;}
#pa > p { margin: 25px auto; line-height: 1.8; text-align: justify; }
.dialog { border: none; border-radius: 16px; box-shadow: 1px 1px 4px rgba(0,0,0,0.5); }
</style>
</head>
<body>
<div id="pa">
<dialog id="loginDialog" class="dialog">
<p>
<strong>模拟登录窗口：</strong><br>
<strong>注：“登录”前禁用主界面的用户交互</strong><br><br>
<label for="uName">姓名：</label>
<input type="text" id="uName" value="匿名"><br><br>
<label for="uPass">密码：</label>
<input type="password" id="uName" value="123456">
<p class="mid"><br><button type="button" id="btnLogin" onclick="loginDialog.close()">登录解锁本页面</button></p>
</p>
</dialog>
<div class="calendar-container">
<div class="calendar-hanger"></div>
<div class="calendar" id="calendar2025">
<div class="calendar-page" data-month="1">
<div class="calendar-top"></div>
<div class="page-content" id="month1"></div>
</div>
<div class="calendar-page" data-month="2">
<div class="calendar-top"></div>
<div class="page-content" id="month2"></div>
</div>
<div class="calendar-page" data-month="3">
<div class="calendar-top"></div>
<div class="page-content" id="month3"></div>
</div>
<div class="calendar-page" data-month="4">
<div class="calendar-top"></div>
<div class="page-content" id="month4"></div>
</div>
<div class="calendar-page" data-month="5">
<div class="calendar-top"></div>
<div class="page-content" id="month5"></div>
</div>
<div class="calendar-page" data-month="6">
<div class="calendar-top"></div>
<div class="page-content" id="month6"></div>
</div>
<div class="calendar-page" data-month="7">
<div class="calendar-top"></div>
<div class="page-content" id="month7"></div>
</div>
<div class="calendar-page" data-month="8">
<div class="calendar-top"></div>
<div class="page-content" id="month8"></div>
</div>
<div class="calendar-page" data-month="9">
<div class="calendar-top"></div>
<div class="page-content" id="month9"></div>
</div>
<div class="calendar-page" data-month="10">
<div class="calendar-top"></div>
<div class="page-content" id="month10"></div>
</div>
<div class="calendar-page" data-month="11">
<div class="calendar-top"></div>
<div class="page-content" id="month11"></div>
</div>
<div class="calendar-page" data-month="12">
<div class="calendar-top"></div>
<div class="page-content" id="month12"></div>
</div>
</div>
</div>
<img class="carousel-img" src="https://pic1.imgdb.cn/item/6982ed0db38a7ceb93057b6f.png" alt="" />
<audio id="aud" loop></audio>
<span id="fullscreen">全屏欣赏</span>
<div id="mydiv">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="play-status">
<div class="status-item">
<span class="status-label">播放状态：</span>
<span class="status-value" id="play-state">播放中</span>
</div>
<div class="status-item">
<span class="status-label">当前歌曲：</span>
<span class="status-value" id="song-name">好运来 - 祖海</span>
</div>
<div class="status-item">
<span class="status-label">播放进度：</span>
<span class="status-value" id="play-progress">03:25/00:00</span>
</div>
<div class="status-item">
<span class="status-label">歌曲列表：</span>
<span class="status-value" id="song-index">1/2</span>
</div>
</div>
<div id="wrapper">好运来 - 祖海</div>
<div>
<span id="prev-song" onclick="changeSong(-1)" title="">上一首</span>
<span id="he" onclick="toggleLrcDirection()" title="">竖排歌词</span>
<span id="next-song" onclick="changeSong(1)" title="">下一首</span>
</div>
</div>
<script>
const songList=[
{
name:"好运来",
src:"https://www.joy127.com/url/139637.mp3",
lrc:`
好运来 - 祖海
词:车行
曲:戚建波
好运来祝你好运来
好运带来了喜和爱
好运来我们好运来
迎着好运兴旺发达通四海
叠个千纸鹤再系个红飘带
愿善良的人们天天好运来
你勤劳生活美你健康春常在
你一生的忙碌为了笑逐颜开
打个中国结请春风剪个彩
愿祖国的日月年年好运来
你凤舞太平年你龙腾新时代
你幸福的家园迎来百花盛开
好运来祝你好运来
好运带来了喜和爱
好运来我们好运来
迎着好运兴旺发达通四海
叠个千纸鹤再系个红飘带
愿善良的人们天天好运来
你勤劳生活美你健康春常在
你一生的忙碌为了笑逐颜开
打个中国结请春风剪个彩
愿祖国的日月年年好运来
你凤舞太平年你龙腾新时代
你幸福的家园迎来百花盛开
好运来祝你好运来
好运带来了喜和爱
好运来我们好运来
迎着好运兴旺发达通四海
好运来祝你好运来
好运带来了喜和爱
好运来我们好运来
迎着好运兴旺发达通四海
好运来祝你好运来
好运带来了喜和爱
好运来我们好运来
迎着好运兴旺发达通四海
通 四 海 好运来
`
},
{
name:"春风十里报新年",
src:"https://bbs.cnzv.cc/mp3/MTQxMzQ2NDkwMiZ3eW1wMw==.mp3",
lrc:`
春风十里报新年
作词：接个吻，开一枪、王东旭、Lambert
作曲：接个吻，开一枪
编曲：接个吻，开一枪
早上光照在房间
穿上新衬衫
镜子里我又长高了些
和同学吃火锅
然后开黑带妹
一起狼人杀不用上学
就不累
发条祝福传给你
请你别忘记
今年我们还要看流星
年初的愿望你都实现了吗
喜欢的男孩你都追到了吗
回家陪妈妈一块包个饺子
包个饺子
回家陪奶奶一块看个电视
看个电视
和弟弟放个烟花
让城市回忆留下
七大姑八大姨
你们的红包在哪
春风吹十里 莺啼报新年
爆竹声声起 好运又一年
走过一片时间海
只为遇见对的爱
烟花聚又散 今夜共团圆
莺啼报新年 春风吹十里
今夜共团圆
早上光照在房间
穿上新衬衫
镜子里我又长高了些
和同学吃火锅然后开黑带妹
一起狼人杀不用上学就不累
发条祝福传给你 请你别忘记
今年我们还要看流星
年初的愿望你都实现了吗
喜欢的男孩你都追到了吗
回家陪妈妈一块包个饺子
包个饺子
晚上陪奶奶一块看个电视
看个电视
和弟弟放个烟花
让城市回忆留下
七大姑八大姨
你们的红包在哪
春风吹十里 莺啼报新年
爆竹声声起 好运又一年
走过一片时间海
只为遇见对的爱
烟花聚又散 今夜共团圆
莺啼报新年 春风吹十里
莺啼报新年
新的一年迎接全新的自己
红纸上我提起笔重游
一遍四季
想和baby你整天腻在一起
享受节日散发出的气息
又过一年光景
为了见到你 我翻山越岭
带着你回家见爸爸妈妈耶
合家团圆一起看联欢晚会
万事如意大吉大利耶
恭喜发财五福给你耶
合家团圆笑口常开耶
好运连连红包拿来耶
万事如意大吉大利耶
恭喜发财五福给你耶
`
},
{
name:"春光美",
src:"https://i.uik.cc/view.php/768db396612a4b97dcfd31f0c90cdaa4.mp3",
lrc:`春光美
演唱：张兰
我们在回忆
说着那冬天
在冬天的山顶
露出春的生机
我们的故事
说着那春天
在春天的好时光
留在我们心里
我们慢慢说着过去
微风吹走冬的寒意
我们眼里的春天
有一种神奇
啊 啊
这就是春天的美丽
我们在回忆
说着那冬天
在冬天的山顶
露出春的生机
我们的故事
说着那春天
在春天的好时光
留在我们心里
一遍一遍甜蜜回忆
春天带来真诚友谊
我们眼里的春天
有一种欢欣
啊 啊
这就是春天的美丽
`
},
{
name:"春暖花开",
src:"https://i.uik.cc/view.php/88b9315f7889d87a36c3a8c1c348ffea.mp3",
lrc:`春暖花开
演唱：周艳泓
啊啊啊啊啊
啊啊啊啊啊
春季准时地到来
您的心窗打没打开
对着蓝天许个心愿
阳光就会走进来
花儿竞相地绽开
您别总是站着发呆
快让自己再美丽一些
让世界因您更可爱
有冷就有暖
冬天是否让您好烦
黎明醒来请揉揉您的眼
您会发现天那么蓝
桃花也红了
心情也好了
冰封的情感
请解除冬眠
风也变暖了
云也变淡了
往事已飞了
飞过那忘川
春季准时地到来
您的心窗打没打开
对着蓝天许个心愿
阳光就会走进来
花儿竞相地绽开
您别总是站着发呆
快让自己再美丽一些
让世界因您更可爱
有冷就有暖
冬天是否让您好烦
黎明醒来请揉揉您的眼
您会发现天那么蓝
桃花也红了
心情也好了
冰封的情感
请解除冬眠
风也变暖了
云也变淡了
往事已飞了
飞过那忘川
桃花也红了
心情也好了
冰封的情感
请解除冬眠
风也变暖了
云也变淡了
往事已飞了
飞过那忘川
`
},
{
name:"阳光总在风雨后",
src:"https://i.uik.cc/view.php/9e9e42fd32bcb800a6313b8200a9606f.mp3",
lrc:`
阳光总在风雨后
人生路上甜苦和喜忧
愿意与您分担所有
难免曾经跌到和等候
要勇敢的抬头
谁愿藏躲在避风的港口
宁有波涛汹涌的自由
愿是您心中灯塔的守候
在迷雾中让您看透
阳光总在风雨后
乌云上有晴空
珍惜所有的感动
每一份希望在您手中
阳光总在风雨后
请相信有彩虹
风风雨雨都接受
我一直会在您的左右
人生路上甜苦和喜忧
愿意与您分担所有
难免曾经跌到和等候
要勇敢的抬头
谁愿藏躲在避风的港口
宁有波涛汹涌的自由
愿是您心中灯塔的守候
在迷雾中让您看透
阳光总在风雨后
乌云上有晴空
珍惜所有的感动
每一份希望在您手中
阳光总在风雨后
请相信有彩虹
风风雨雨都接受
我一直会在您的左右
阳光总在风雨后
乌云上有晴空
珍惜所有的感动
每一份希望在您手中
阳光总在风雨后
请相信有彩虹
风风雨雨都接受
我一直会在您的左右
风风雨雨都接受
我一直会在您的左右
`
},
{
name:"你笑起来真好看",
src:"https://upfile.mp3.wf/view.php/ea74b7e84efa4c68c209be5363ed0917.mp3",
lrc:`
你笑起来真好看 - 李昕融等
词：周兵
曲：李凯稠
编曲：李凯稠/赵伟丞
想去远方的山川
想去海边看海鸥
不管风雨有多少
有你就足够
喜欢看你的嘴角
喜欢看你的眉梢
白云挂在那蓝天
像你的微笑
你笑起来真好看
像春天的花一样
把所有的烦恼所有的忧愁
统统都吹散
你笑起来真好看
像夏天的阳光
整个世界全部的时光
美得像画卷
想去远方的山川
想去海边看海鸥
不管风雨有多少
有你就足够
喜欢看你的嘴角
喜欢看你的眉梢
白云挂在那蓝天
像你的微笑
你笑起来真好看
像春天的花一样
把所有的烦恼所有的忧愁
统统都吹散
你笑起来真好看
像夏天的阳光
整个世界全部的时光
美得像画卷
你笑起来真好看
像春天的花一样
把所有的烦恼所有的忧愁
统统都吹散
你笑起来真好看
像夏天的阳光
整个世界全部的时光
美得像画卷
你笑起来真好看
像春天的花一样
把所有的烦恼所有的忧愁
统统都吹散
你笑起来真好看
像夏天的阳光
整个世界全部的时光
美得像画卷
整个世界全部的时光
美得像画卷
`
},
{
name:"战马",
src:"https://i.uik.cc/view.php/bac8d5e97a8614d166b16f845ab315f4.mp3",
lrc:`
战马-崔伟立
词曲：崔伟立
演唱：崔伟立
炙热的太阳下
挥汗如雨的脸颊
熬过了冬和夏
阳光刺破这云霞
漫漫的长夜啊
多少等待和挣扎
梦中的黑骏马
向千里之外出发
马蹄哒哒哒
黄河水哗啦啦
要努力生根要发芽
让梦想开出最美的花
听大风不停刮
任大雨不停下
阻挡不了我的步伐
要踏遍人间海角天涯
炙热的太阳下
挥汗如雨的脸颊
熬过了冬和夏
阳光刺破这云霞
漫漫的长夜啊
多少等待和挣扎
梦中的黑骏马
向千里之外出发
马蹄哒哒哒
黄河水哗啦啦
要努力生根要发芽
让梦想开出最美的花
听大风不停刮
任大雨不停下
阻挡不了我的步伐
要踏遍人间海角天涯
曾经的那个懵懂小孩他已经长大
也可以勇敢的面对这世界的复杂
不装聋作哑不沉默扮傻
用豪情万丈的初心化作千军万马
这岁月无情的染白那少年的头发
这时光像一个盗贼爬上我的脸颊
看江山如画要擦亮盔甲
要看遍这美丽世界所有繁华
哈哦
喔喔
哈哦
喔喔
马蹄哒哒哒
黄河水哗啦啦
要努力生根要发芽
让梦想开出最美的花
听大风不停刮
任大雨不停下
阻挡不了我的步伐
要踏遍人间海角天涯
要踏遍人间海角天涯
`
},
{
name:"粉红的回忆",
src:"https://i.uik.cc/view.php/7b16516b8438c1e5977df57a56c1f732.mp3",
lrc:`
粉红的回忆
演唱：韩宝仪
夏天夏天悄悄过去留下小秘密
压心底压心底不能告诉您
晚风吹过温暖我心底我又想起您
多甜蜜多甜蜜怎能忘记
不能忘记您把您写在日记里
不能忘记您心里想的还是您
浪漫的夏季还有浪漫的一个您
给我一个粉红的回忆
哦夏天夏天悄悄过去依然怀念您
您一言您一语都叫我回忆
就在就在秋天的梦里我又遇见您
总是不能忘记您
夏天夏天悄悄过去留下小秘密
压心底压心底不能告诉您
晚风吹过温暖我心底我又想起您
多甜蜜多甜蜜怎能忘记
不能忘记您把您写在日记里
不能忘记您心里想的还是您
浪漫的夏季还有浪漫的一个您
给我一个粉红的回忆
哦夏天夏天悄悄过去依然怀念您
您一言您一语都叫我回忆
就在就在秋天的梦里我又遇见您
总是不能忘记您
不能忘记您把您写在日记里
不能忘记您心里想的还是您
浪漫的夏季还有浪漫的一个您
给我一个粉红的回忆
哦夏天夏天悄悄过去依然怀念您
您一言您一语都叫我回忆
就在就在秋天的梦里我又遇见您
总是不能忘记您
`
},
{
name:"十五的月亮 ",
src:"https://upfile.mp3.wf/view.php/7d544dbb6a23026f8f2446f59a62303a.mp3",
lrc:`
十五的月亮 - 董文华
词：石祥
曲：铁源/徐锡宜
编曲：李杰
弦乐指挥：李朋
弦乐：国际首席爱乐乐团
录音：李巍
录音室：中国剧院录音室
混音：万小元
混音室：中国剧院录音室
出品人：蔡诚俊
音乐总监：林虎
监制：李慧/王冰冰
制作发行：悦晟雷音（北京）
文化传媒有限公司
啊丰收果里有你的甘甜
也有我的甘甜
军功章 有我的一半
也有你的一半
十五的月亮 照在家乡 照在边关
宁静的夜晚 你也思念 我也思念
我守在婴儿的摇篮边
你巡逻在祖国的边防线
我在家乡耕耘着农田
你在边疆站岗值班
啊丰收果里有你的甘甜
也有我的甘甜
军功章 有我的一半
也有你的一半
十五的月亮 照在家乡 照在边关
宁静的夜晚 你也思念 我也思念
我孝敬父母任劳任怨
你献身祖国不惜流血汗
我肩负着全家的重任
你在保卫国家安全
啊祖国昌盛 有你的贡献
也有我的贡献
万家团圆 是我的心愿
也是你的心愿
啊丰收果里有你的甘甜
也有我的甘甜
军功章 有我的一半
也有你的一半
啊
也是你的心愿
`
},
{
name:"歌唱祖国 ",
src:"https://www.joy127.com/url/143558.mp3",
lrc:`
歌唱祖国 - 中央乐团等
词：王莘
曲：王莘
五星红旗迎风飘扬
胜利歌声多么响亮
歌唱我们亲爱的祖国
从今走向繁荣富强
歌唱我们亲爱的祖国
从今走向繁荣富强
越过高山 越过平原
跨过奔腾的黄河长江
宽广美丽的土地
是我们亲爱的家乡
英雄的人民站起来了
我们团结友爱坚强如钢
五星红旗迎风飘扬
胜利歌声多么响亮
歌唱我们亲爱的祖国
从今走向繁荣富强
歌唱我们亲爱的祖国
从今走向繁荣富强
我们勤劳 我们勇敢
独立自由是我们的理想
我们战胜了多少苦难
才得到今天的解放
我们爱和平
我们爱家乡
谁敢侵犯我们就叫他死亡
五星红旗迎风飘扬
胜利歌声多么响亮
歌唱我们亲爱的祖国
从今走向繁荣富强
歌唱我们亲爱的祖国
从今走向繁荣富强
东方太阳 正在升起
人民共和国正在成长
我们领袖毛泽东
指引着前进的方向
我们的生活天天向上
我们的前程万丈光芒
五星红旗迎风飘扬
胜利歌声多么响亮
歌唱我们亲爱的祖国
从今走向繁荣富强
歌唱我们亲爱的祖国
从今走向繁荣富强
`
},
{
name:"明天会更好",
src:"https://i.uik.cc/view.php/e7cb5415f7b95ce5ed612d09f951f2a1.mp3",
lrc:`
明天更美好
演唱：群星
轻轻敲醒沉睡的心灵
慢慢张开您的眼睛
看看忙碌的世界
是否依然孤独地转个不停
春风不解风情
吹动少年的心
让昨日脸上的泪痕
随记忆风干了
抬头寻找天空的翅膀
候鸟出现它的影迹
带来远处的饥荒
无情的战火依然存在的消息
玉山白雪飘零
燃烧少年的心
使真情溶化成音符
倾诉遥远的祝福
唱出您的热情
伸出您双手
让我拥抱着您的梦
让我拥有您真心的面孔
让我们的笑容
充满着青春的骄傲
为明天献出虔诚的祈祷
谁能不顾自己的家园
抛开记忆中的童年
谁能忍心看他昨日的忧愁
带走我们的笑容
青春不解红尘
胭脂沾染了灰
让久违不见的泪水
滋润了您的面容
唱出您的热情
伸出您双手
让我拥抱着您的梦
让我拥有您真心的面孔
让我们的笑容
充满着青春的骄傲
为明天献出虔诚的祈祷
轻轻敲醒沉睡的心灵
慢慢张开您的眼睛
看看忙碌的世界
是否依然孤独地转个不停
日出唤醒清晨
大地光彩重生
让和风拂出的音响
谱成生命的乐章
唱出您的热情
伸出您双手
让我拥抱着您的梦
让我拥有您真心的面孔
让我们的笑容
充满着青春的骄傲
让我们期待明天会更好
唱出您的热情
伸出您双手
让我拥抱着您的梦
让我拥有您真心的面孔
让我们的笑容
充满着青春的骄傲
让我们期待明天会更好
唱出您的热情
伸出您双手
让我拥抱着您的梦
让我拥有您真心的面孔
让我们的笑容
充满着青春的骄傲
`
},
{
name:"喜乐年华 ",
src:"https://www.joy127.com/url/140756.mp3",
lrc:`
陈红 - 喜乐年华
过上了好日子红红火火
赶上了好时代喜乐年华
你看那山捧金水流银呀
春夏秋冬里大地开花
那个喜呀那个乐呀
那个敲呀那个打
那个喜呀那个乐呀
那个敲呀那个打
逢盛世祝太平红红火火
春常在风雨顺喜乐年华
你看那人风流心也潇洒
东西南北中彩虹高挂
那个喜呀那个乐呀
那个敲呀那个打
那个喜呀那个乐呀那个敲呀那个打
心连心手挽手向着明天走
真情在爱不够咱们大中华
心连心手挽手向着明天走
真真情情爱不够咱们大中华
逢盛世祝太平红红火火
春常在风雨顺喜乐年华
你看那人风流心也潇洒
东西南北中彩虹高挂
那个喜呀那个乐呀那个敲呀那个打
那个喜呀那个乐呀那个敲呀那个打
心连心手挽手向着明天走
真情在爱不够咱们大中华
心连心手挽手向着明天走
真真情情爱不够咱们大中华
心连心手挽手向着明天走
真情在爱不够咱们大中华
心连心手挽手向着明天走
真真情情爱不够咱们大中华
啦
真真情情爱不够咱们大中华
大中华
`
},
];
let currentSongIndex=0;
let gcAr=[];
let curkey=0,isSeeking=false;
let totalDuration=0;
const playStateEl=document.getElementById('play-state');
const playProgressEl=document.getElementById('play-progress');
const songNameEl=document.getElementById('song-name');
const songIndexEl=document.getElementById('song-index');
const wrapper=document.getElementById('wrapper');
const heBtn=document.getElementById('he');
function formatTime(seconds){
const mins=Math.floor(seconds/60).toString().padStart(2,'0');
const secs=Math.floor(seconds%60).toString().padStart(2,'0');
return `${mins}:${secs}`;
}
function changeSong(direction){
currentSongIndex+=direction;
if(currentSongIndex<0){
currentSongIndex=songList.length-1;
}else if(currentSongIndex>=songList.length){
currentSongIndex=0;
}
loadSong(currentSongIndex);
}
function loadSong(index){
const song=songList;
aud.src=song.src;
gcAr=lrc2HC(song.lrc);
curkey=0;
songNameEl.textContent=song.name;
songIndexEl.textContent=`${index+1}/${songList.length}`;
playProgressEl.textContent=`00:00 / 00:00`;
playStateEl.textContent='播放中';
aud.play();
mydiv.style.animationPlayState='running';
pa.style.setProperty('--state','running');
wrapper.innerHTML='';
wrapper.classList.remove('vertical-lrc');
heBtn.innerText='竖排歌词';
}
loadSong(0);
aud.onloadedmetadata=function(){
totalDuration=aud.duration;
playProgressEl.textContent=`00:00 / ${formatTime(totalDuration)}`;
};
aud.ontimeupdate=()=>{
if(curkey>gcAr.length-1)return;
if(aud.currentTime>=gcAr){
const gap=gcAr?.??0-gcAr;
showLrc(gcAr,wrapper,gap);
}
if(totalDuration){
playProgressEl.textContent=`${formatTime(aud.currentTime)} / ${formatTime(totalDuration)}`;
}
};
aud.onended=()=>{
changeSong(1);
}
aud.onseeked=()=>calcKey();
function lrc2HC(text){
let lrcAr=[];
let ar=text.trim().split('\n');
ar.sort();
let reg=/\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item=>{
if(reg.test(item)){
let result=item.match(reg);
let tmsg=parseInt(result)*60+parseInt(result)+parseInt(result)/1000;
lrcAr.push(.trim()]);
}
});
return lrcAr?lrcAr:;
};
function calcKey(){
for(let j=0;j<gcAr.length;j++){
if(aud.currentTime<=gcAr){
curkey=j-1;
break;
}
}
if(curkey<0)curkey=0;
if(curkey>gcAr.length-1)curkey=gcAr.length-1;
let time=gcAr?.??0-gcAr;
isSeeking=false;
showLrc(gcAr,wrapper,time);
}
function showLrc(str,targetElm,time){
if(isSeeking)return;
targetElm.innerHTML='';
const chars=str.split('').map(c=>c===' '?' ':c);
const frg=document.createDocumentFragment();
chars.forEach((char,idx)=>{
const span=document.createElement('span');
span.innerHTML=char;
span.classList.add('char');
const x=Math.random()*(Math.random()>0.5?-300:300);
const y=Math.random()*(Math.random()>0.5?-300:300);
span.style.cssText+=`
color:hsl(${Math.floor(Math.random()*360)},100%,50%);
--x:${x}px;
--y:${y}px;
--delay:${Math.random()*0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey++;
setTimeout(()=>isSeeking=false,time);
}
let isVertical=false;
function toggleLrcDirection(){
isVertical=!isVertical;
if(isVertical){
heBtn.innerText='横排歌词';
wrapper.classList.add('vertical-lrc');
}else{
heBtn.innerText='竖排歌词';
wrapper.classList.remove('vertical-lrc');
}
}
mydiv.onclick=()=>{
const vids=document.querySelectorAll(',.vid');
if(aud.paused){
aud.play();
mydiv.title="暂停";
mydiv.style.animationPlayState='running';
pa.style.setProperty('--state','running');
playStateEl.textContent='播放中';
}else{
aud.pause();
mydiv.title="播放";
mydiv.style.animationPlayState='paused';
pa.style.setProperty('--state','paused');
playStateEl.textContent='已暂停';
}
};
pa.style.setProperty('--state','running');
const fullscreenEl=document.getElementById('fullscreen');
let fs=true;
let fsTimer;
if(fullscreenEl){
fullscreenEl.onclick=()=>{
if(fs){
fullscreenEl.innerText='退出全屏';
if(pa.requestFullscreen){pa.requestFullscreen();}
else if(pa.webkitRequestFullscreen){pa.webkitRequestFullscreen();}
else if(pa.msRequestFullscreen){pa.msRequestFullscreen();}
}else{
fullscreenEl.innerText='全屏欣赏';
if(document.exitFullscreen){document.exitFullscreen();}
else if(document.webkitExitFullscreen){document.webkitExitFullscreen();}
else if(document.msExitFullscreen){document.msExitFullscreen();}
}
fs=!fs;
};
pa.addEventListener('mousemove',()=>{
clearTimeout(fsTimer);
fullscreenEl.style.opacity='1';
fsTimer=setTimeout(()=>{fullscreenEl.style.opacity='0';},3000);
});
document.addEventListener('fullscreenchange',()=>{
fs=!document.fullscreenElement;
fullscreenEl.innerText=fs?'全屏欣赏':'退出全屏';
});
}
function generateCalendar() {
const months=[
'一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'
];
const daysInMonth=;
const firstDayOfYear=3;
for(let month=1;month<=12;month++){
const monthEl=document.getElementById(`month${month}`);
if(!monthEl)continue;
let firstDay=firstDayOfYear;
for(let i=1;i<month;i++){
firstDay=(firstDay+daysInMonth)%7;
}
let calendarHTML=`
<div class="month-title">${months}</div>
<div class="year-title">2026</div>
<div class="date-grid">
<div class="day-header">日</div>
<div class="day-header">一</div>
<div class="day-header">二</div>
<div class="day-header">三</div>
<div class="day-header">四</div>
<div class="day-header">五</div>
<div class="day-header">六</div>
`;
for(let i=0;i<firstDay;i++){
calendarHTML+=`<div class="date-cell other-month"></div>`;
}
const days=daysInMonth;
for(let day=1;day<=days;day++){
const dayOfWeek=(firstDay+day-1)%7;
let cellClass='date-cell';
if(dayOfWeek===0||dayOfWeek===6){
cellClass+=' weekend';
}
if(month===2&&day===17){
cellClass+=' today';
}
calendarHTML+=`<div class="${cellClass}">${day}</div>`;
}
calendarHTML+=`
</div>
<div class="page-number">${month}/12</div>
`;
monthEl.innerHTML=calendarHTML;
}
}
function toggleLyrics() {
const toggleBtn=document.getElementById('toggle-lyrics-btn');
toggleBtn.classList.toggle('active');
if(lyricsContainer.style.display==='none'){
lyricsContainer.style.display='block';
}else{
lyricsContainer.style.display='none';
}
}
function initPage() {
generateCalendar();
try{
colorChangeBtn.addEventListener('click',toggleColorChange);
}catch(e){}
try{
audio.addEventListener('loadedmetadata',()=>{
totalTimeEl.textContent=formatTime(audio.duration);
});
audio.addEventListener('timeupdate',()=>{
updateTimeDisplay();
showLyric();
});
audio.addEventListener('ended',()=>{
updateButtonStates(false);
controlBackgroundVideo(false);
controlLyricAnimation(false);
controlCalendarAnimation(false);
stopAutoColorChange();
audio.currentTime=0;
});
}catch(e){}
try{
playSong();
}catch(e){}
try{
if(isColorChangeEnabled){
startAutoColorChange();
}
}catch(e){}
}
document.addEventListener('DOMContentLoaded',initPage);
</script>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/helight/linenumber.js';
linenumber();
document.addEventListener("DOMContentLoaded", (e) => {
loginDialog.showModal();
}, false);
</script>
</body>
</html>
页:
[1]