本帖最后由 麻椒鱼滑 于 2026-6-22 15:07 编辑
独木不成林啊,我能有现在的觉悟,各位所起的作用也是很大的。如果说过去的是在升级的话,那现在的我大概是要进阶了。正因为未来会更艰难,我才需要快点长大。
其实那篇帖子本来不该有那么长的,我觉得一直抒情的话显得太短了,但是一直叙事的话又太水了,就这样面多加水水多加面,它就泡发了
因为时间比较紧张所以没能完全写完,我的经历也没有都写下来,还有很多我灵感爆发时想到的好词好句没用上()但有时候不完美也是一种美。
说到底还是很感激的,我现在就像吸饱血的血魔一样满足。如果没有各位参与互动的话,我现在可能已经扭曲成大罪生物了也说不定
还有陈阳兄也是要感谢的,算上一开始的华扇你已经给我画了两张了()
- <!-- ====== 歌词漂浮播放器 ====== -->
- <style>
- /* 容器:全屏固定,不阻挡点击 */
- #lyrics-float-container {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
- z-index: 9999;
- overflow: hidden;
- }
- /* 每条歌词 */
- .lyrics-float-line {
- position: absolute;
- font-size: 26px;
- font-weight: bold;
- color: #CF0000;
- white-space: nowrap;
- opacity: 0;
- transition: opacity 0.8s ease-out;
- text-shadow: 2px 0 0 #000, 0 2px 0 #000, -2px 0 0 #000, 0 -2px 0 #000;
- transform-origin: left center;
- pointer-events: none;
- font-family: "Microsoft YaHei", sans-serif;
- }
- /* 播放器固定在左下角 */
- #lyrics-audio-player {
- position: fixed;
- bottom: 20px;
- left: 20px;
- z-index: 10000;
- background: rgba(0,0,0,0.6);
- border-radius: 30px;
- padding: 8px 16px;
- backdrop-filter: blur(4px);
- box-shadow: 0 4px 15px rgba(0,0,0,0.5);
- }
- #lyrics-audio-player audio {
- display: block;
- width: 250px;
- max-width: 60vw;
- }
- /* 移动端适应 */
- @media (max-width: 600px) {
- .lyrics-float-line { font-size: 18px; }
- #lyrics-audio-player { bottom: 10px; left: 10px; padding: 4px 10px; }
- #lyrics-audio-player audio { width: 180px; }
- }
- </style>
- <div id="lyrics-float-container"></div>
- <div id="lyrics-audio-player">
- <audio id="lyrics-audio" controls>
- <!-- ⚠️ 请替换成你自己的音频文件链接(支持 .mp3, .ogg 等) -->
- <source src="https://huiji-public.huijistatic.com/limbuscompany/uploads/b/bc/SAIKAI.ogg" type="audio/ogg">
- 您的浏览器不支持音频播放,请更换现代浏览器。
- </audio>
- </div>
- <script>
- (function() {
- // ========== 歌词数据(时间轴 + 文本) ==========
- // 格式:{ start: 开始秒, end: 结束秒, text: '显示的文字' }
- const lyricsData = [
- { start: 30.404, end: 37.211, text: '在我年少迷茫之时' },
- { start: 37.212, end: 44.941, text: '你悄然出现,为这扇心门开锁' },
- { start: 44.942, end: 51.266, text: '如丝线一般,花瓣舒展' },
- { start: 51.267, end: 59.055, text: '一朵鲜红的河原抚子花' },
- { start: 59.056, end: 73.923, text: '你使我发现,原来我还存有能力关爱他人' },
- { start: 73.924, end: 86.666, text: '原来在我的内心深处还留有一份纯真' },
- { start: 86.667, end: 89.049, text: '因为此刻我明白' },
- { start: 89.050, end: 92.113, text: '疼痛无从定义过去' },
- { start: 92.114, end: 97.080, text: '我们生来就被赐予能够跨越无数波折的力量' },
- { start: 97.081, end: 101.322, text: '其实没有那么苦' },
- { start: 101.323, end: 103.484, text: '因为有你和我相伴' },
- { start: 103.485, end: 106.685, text: '在我们的有生之年,珍惜这一切' },
- { start: 106.686, end: 112.187, text: '因为“再”并不是“再见”的“再”' },
- { start: 112.188, end: 143.207, text: '让我们重播回忆' },
- { start: 143.208, end: 149.841, text: '我确信我必须挺身努力' },
- { start: 149.842, end: 157.568, text: '你值得拥有整个世界,甚至更多' },
- { start: 157.569, end: 163.976, text: '但其实你更希望' },
- { start: 163.977, end: 171.248, text: '希望我们可以一同度过这有限的时光' },
- { start: 171.752, end: 179.527, text: '仅靠保护远远不够' },
- { start: 179.528, end: 190.341, text: '就算付出,也无法填满你那渴求爱的空杯' },
- { start: 190.342, end: 223.492, text: '我反复自问——' },
- { start: 223.493, end: 226.685, text: '我懂什么是爱?' },
- { start: 226.686, end: 231.650, text: '明明从未体验过,又怎能把它重现?' },
- { start: 231.651, end: 238.136, text: '我只知道,一定要让你茁壮成长' },
- { start: 238.137, end: 241.084, text: '若你缺乏养分' },
- { start: 241.085, end: 249.875, text: '我愿把血液中的每一滴都浇灌给你' },
- { start: 250.336, end: 252.684, text: '如今我终于明白' },
- { start: 252.685, end: 255.859, text: '牺牲之路才是捷径' },
- { start: 255.860, end: 260.521, text: '我的欠缺将无法颠覆这个事实:' },
- { start: 260.522, end: 266.905, text: '我其实只愿能给你提供最好的一生' },
- { start: 266.906, end: 270.417, text: '这条红线将永不会被斩断' },
- { start: 270.418, end: 275.867, text: '“再”更不是“再见”的“再”' },
- { start: 275.868, end: 280.000, text: '你愿意最终原谅我吗?' }
- ];
- // ========== 创建歌词 DOM 元素 ==========
- const container = document.getElementById('lyrics-float-container');
- const lineElements = [];
- lyricsData.forEach((item, index) => {
- const el = document.createElement('div');
- el.className = 'lyrics-float-line';
- el.dataset.start = item.start;
- el.dataset.end = item.end;
- el.dataset.text = item.text;
- // 预先随机一个固定位置(每次刷新不变,但也可以每次出现时随机,我们选择出现时随机)
- // 这里只创建,位置在显示时设定
- container.appendChild(el);
- lineElements.push(el);
- });
- // ========== 打字机效果函数 ==========
- function typeWriter(element, text, speed = 60) {
- element.textContent = '';
- let index = 0;
- function addChar() {
- if (index < text.length) {
- element.textContent += text.charAt(index);
- index++;
- setTimeout(addChar, speed);
- }
- }
- addChar();
- }
- // ========== 音频播放器 ==========
- const audio = document.getElementById('lyrics-audio');
- // ========== 时间更新监听 ==========
- audio.addEventListener('timeupdate', function() {
- const currentTime = audio.currentTime;
- const winW = window.innerWidth;
- const winH = window.innerHeight;
- lineElements.forEach(el => {
- const start = parseFloat(el.dataset.start);
- const end = parseFloat(el.dataset.end);
- const text = el.dataset.text;
- if (currentTime >= start && currentTime < end) {
- // 该句应该在显示状态
- if (el.style.opacity === '0' || el.style.opacity === '') {
- // 首次进入区间 → 设置随机位置并显示
- const top = Math.random() * (winH * 0.5) + (winH * 0.25);
- const left = Math.random() * (winW * 0.4) + (winW * 0.3);
- const rotate = Math.random() * 60 - 30; // -30° ~ 30°
- el.style.top = top + 'px';
- el.style.left = left + 'px';
- el.style.transform = 'rotate(' + rotate + 'deg)';
- el.style.opacity = '1';
- // 启动打字机
- typeWriter(el, text, 50);
- }
- // 如果已经显示,则保持(不再重复打字)
- } else {
- // 不在区间内 → 隐藏并清空文本(预备下次重新打字)
- if (el.style.opacity !== '0') {
- el.style.opacity = '0';
- // 为保持整洁,不清空文本,但下次显示时会重新打字(因为opacity从0变1会触发打字)
- // 但为避免残留,可以在隐藏后清空?我们选择在显示时清空并打字,所以这里不清空,避免闪烁
- // 但我们可以在显示时总是清空重打,所以这里保留文本也没事
- }
- }
- });
- });
- // ========== 窗口大小改变时,可重新调整位置(可选) ==========
- // 但为了效果,无需额外操作,因为每次显示都是随机位置
- // ========== 额外:点击播放器外任何地方不影响(已 pointer-events:none) ==========
- console.log('歌词漂浮已启动,请点击左下角播放器播放音乐');
- })();
- </script>
- <!-- ====== 结束 ====== -->
复制代码
|