杨帆 发表于 2026-6-11 19:30

粉红的回忆

本帖最后由 杨帆 于 2026-7-3 16:38 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="referrer" content="never" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粉红的回忆</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
:root { --ocean-dark: #0a3d62;--ocean-medium: #3c6382;--ocean-light: #60a3bc;--sand-color: #f5e1b5;--shell-light: #f0e6d2;--shell-dark: #d9c9a3;--color-1: #fff887;--color-2: #fc89e5;--color-3: #fd27d2;--color-4: #9cf9fc;--color-5: #0dd7de;--color-6: #fbcb6d;--color-7: #fb8739;--color-8: #fa5f57;--starfish-body: #fb2f39;--starfish-accent: #fb2f39;--starfish-light: #fbb5b8; }
#papa { position: relative;display: grid;place-items: center;margin:30px 0;width:1280px;height:750px;left:calc(50% - 81px);transform:translateX(-50%);box-shadow:3px 3px 6px gray;overflow:hidden;z-index:1;background:#000 url() no-repeat center/cover;font-family:"ZCOOL KuaiLe","Ma Shan Zheng","Long Cang","华文行楷","SimHei","Arial","sans-serif";color: white; }
#sparklesContainer { position: absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;transition:opacity 0.8s ease; }
.sparkle { position: absolute;border-radius:50%;opacity:0;animation:sparkleAnim 2.5s ease-out forwards; }
@keyframes sparkleAnim { 0%{opacity:0;transform:translate(0,0) scale(0);} 50%{opacity:1;transform:translate(var(--tx),var(--ty)) scale(1);} 100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0);} }
.fade-out { opacity:0 !important; }
.hidden { display:none !important; }
.intro { margin:0;z-index:2;width:100%;height:100%;position:absolute;background-size:cover;background-blend-mode:hard-light;animation:hue-rotate 3s linear infinite; }
#lyric { position:absolute;bottom:3%;left: calc(50% - 50px); transform: translateX(-50%); z-index:12;display:flex;flex-direction:column;justify-content:center;height:160px;width:80%;text-align:center;filter:drop-shadow(#000 0 0 2px);font-size:3.3em; }
#lyricDisplay { height:100%;letter-spacing:4px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;padding:0 1em;width:100%;animation:hue-rotate 0.5s linear infinite; }
.lyrichar { display:inline-block;opacity:0;animation:charAppear 0.5s forwards;margin:0 2px; }
@keyframes charAppear { to{opacity:1;transform:translate(0%);} }
@keyframes hue-rotate { to{filter:hue-rotate(360deg);} }
#statusDisplay { position:absolute;z-index:3;font-size:1.5em;font-weight:50;left:25%;top:15%;color:#fff; }
#fullscreen { border-radius:4px;position:absolute;color:DarkGray;padding:4px 8px;z-index:12;font-size:25px;border:none;cursor:pointer;top:25px;left:25px;background:transparent; }
#fullscreen:hover { font-style:italic; }
.dancer { position:absolute; pointer-events:none; z-index:2; }
.vid1 { position:absolute;z-index:3;left:-10%;top:-10%;width:120%;height:120%;object-fit:cover;pointer-events:none;object-position:center;mix-blend-mode: unset; mask: linear-gradient(to bottom, red 30%,transparent 58%);-webkit-mask: linear-gradient(to bottom,red 30%,transparent 58%); will-change: transform; }
.vid2 { position:absolute;z-index:3;left:-10%;top:-10%;width:120%;height:120%;object-fit:cover;pointer-events:none;object-position:center;mix-blend-mode: initial; mask: linear-gradient(to bottom, transparent 65%, red 78%);-webkit-mask: linear-gradient(to bottom,transparent 65%, red 78%); will-change: transform; }
#msvg { position:absolute;top:5%;left:70%;z-index:12;cursor:pointer;width:10vmax;height:10vmax;display:grid;place-items:center; margin: 20px auto;transition: .98s; filter: brightness(1.5);}
#msvg:hover { filter: unset !important; }
#msvg path { stroke-dasharray: var(--len);stroke-dashoffset: var(--len);animation: draw 2s var(--delay) forwards, fill 1s calc(var(--delay) + 2s) forwards; }
.rotate { animation: rotate 6s 0.5s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fill { to { fill: url(#grd); } }
</style>
<div id="papa">
<video class="vid1" src="https://img2.tukuppt.com/video_show/2629112/00/02/06/5b509bb0793dd.mp4" preload="auto" autoplay loop playsinline muted></video>
<video class="vid2" src="https://img2.tukuppt.com/video_show/2475824/00/02/16/5b53fec979d9e.mp4" preload="auto" autoplay loop playsinline muted></video>
<div id="fullscreen">全屏欣赏</div>
<img class="dancer" data-gif="https://pic1.imgdb.cn/item/6989ca6701b1be04704f08e2.gif" data-png="https://pic1.imgdb.cn/item/6989cc3f01b1be04704f094d.png" src="https://pic1.imgdb.cn/item/6989ca6701b1be04704f08e2.gif" style="position:absolute; left:0px; top:0px; width:100%; height:100%;">
<div class="intro"></div>
<div id="statusDisplay">播放中: -2:20</div>
<div id="sparklesContainer"></div>
<div id="lyric"><div id="lyricDisplay"></div></div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=2036814200.mp3" loop autoplay></audio>
<svg id="msvg" width="400" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
   <title>播放/暂停</title>
   <defs>
   <linearGradient id="grd" x1="0" x2="0" y1="0" y2="1">
       <stop offset="0%" stop-color="white"></stop>
       <stop offset="50%" stop-color="magenta"></stop>
       <stop offset="100" stop-color="red"></stop>
   </linearGradient>
   </defs>
   <g id="g1"></g>
</svg>
</div>
<script>
const papa = document.getElementById('papa');
const audioPlayer = document.getElementById('aud');
const msvg = document.getElementById('msvg');
const lyricDisplay = document.getElementById('lyricDisplay');
const statusDisplay = document.getElementById('statusDisplay');
const intro = document.querySelector('.intro');
const vids = document.querySelectorAll('video');
const sparklesContainer = document.getElementById('sparklesContainer');
const fullscreen = document.getElementById('fullscreen');
let currentLyricIndex = -1;
let isUpdating = false;
window.isPlaying = false;
let sparkleInterval = null;
function createSingleSparkle() {
const sparkle = document.createElement('div');
sparkle.className = 'sparkle';
const x = Math.random()*100;
const y = Math.random()*100;
sparkle.style.left = `${x}%`;
sparkle.style.top = `${y}%`;
sparkle.style.animationDelay = `${Math.random()*2}s`;
sparkle.style.setProperty('--tx', `${(Math.random()-0.5)*80}px`);
sparkle.style.setProperty('--ty', `${(Math.random()-0.5)*80}px`);
const currentVolume = audioPlayer.volume;
const currentTime = audioPlayer.currentTime || 0;
const baseSize = 6;
const sizeMultiplier = 1+(currentVolume*1.5);
const finalSize = baseSize*sizeMultiplier;
sparkle.style.width = `${finalSize}px`;
sparkle.style.height = `${finalSize}px`;
const beat = Math.sin(currentTime*8)*0.5+0.5;
const colors = ['#fff887','#fc89e5','#fd27d2','#9cf9fc','#0dd7de','#fbcb6d','#fb8739','#fa5f57'];
const colorIndex = Math.floor((currentTime*10+beat*5)%colors.length);
const randomColor = colors;
sparkle.style.background = randomColor;
sparkle.style.boxShadow = `0 0 10px ${randomColor},0 0 20px ${randomColor}`;
sparklesContainer.appendChild(sparkle);
setTimeout(()=>{
    if(sparkle && !sparkle.classList.contains('hidden')) sparkle.remove();
},3000);
}
function startSparkleLoop() {
stopSparkleLoop();
sparklesContainer.classList.remove('fade-out');
sparklesContainer.style.opacity = 1;
sparklesContainer.innerHTML = '';
for(let i=0;i<50;i++) createSingleSparkle();
sparkleInterval = setInterval(()=>{
    if(window.isPlaying) createSingleSparkle();
},200);
}
function stopSparkleLoop() {
clearInterval(sparkleInterval);
sparkleInterval = null;
}
function fadeOutAllSparkles() {
stopSparkleLoop();
sparklesContainer.classList.add('fade-out');
document.querySelectorAll('.sparkle').forEach(el=>el.classList.add('hidden'));
setTimeout(()=>sparklesContainer.innerHTML='',800);
}
function resetLyrics() {
currentLyricIndex = -1;
lyricDisplay.innerHTML = '';
}
const mState = ()=>{
const list = document.querySelectorAll('.dancer');
const state = audioPlayer.paused ? 'paused' : 'running';
vids.forEach(vid => audioPlayer.paused ? vid.pause() : vid.play());
const paths = document.querySelectorAll('#msvg path');
const rotateG = document.getElementById('g1');
if (audioPlayer.paused) {
    paths.forEach(p => p.style.animationPlayState = 'paused');
    if (rotateG) rotateG.style.animationPlayState = 'paused';
} else {
    paths.forEach(p => p.style.animationPlayState = 'running');
    if (rotateG) rotateG.style.animationPlayState = 'running';
}
list.forEach(el => {
    if(el.dataset.gif && el.dataset.png){
      el.src = audioPlayer.paused ? el.dataset.png : el.dataset.gif;
    }
});
msvg.style.animationPlayState = state;
intro.style.animationPlayState = state;
lyricDisplay.style.animationPlayState = state;
};
function togglePlayPause() {
if(audioPlayer.paused){
    if(audioPlayer.currentTime <= 0.5) resetLyrics();
    audioPlayer.play().then(()=>{
      window.isPlaying = true;
      statusDisplay.innerHTML = `<span style="color:#CC00FF">播放中：</span><span style="color:#FF0088">${formatTime(-(audioPlayer.duration-audioPlayer.currentTime))}</span>`;
      startSparkleLoop();
      mState();
    }).catch(err=>{
      console.error('播放失败',err);
      statusDisplay.textContent = '播放失败';
    });
}else{
    audioPlayer.pause();
    window.isPlaying = false;
    statusDisplay.innerHTML = '<span style="color:#CC00FF">已暂停</span>';
    fadeOutAllSparkles();
    mState();
}
msvg.title = audioPlayer.paused ? '播放' : '暂停';
}
msvg.addEventListener('click',e=>{
e.stopPropagation();
togglePlayPause();
});
audioPlayer.addEventListener('play',mState);
audioPlayer.addEventListener('pause',mState);
audioPlayer.play().catch(_ => mState());
msvg.title = '暂停';
function displayLyricCharByChar(text) {
lyricDisplay.innerHTML = '';
const chars = text.split('');
const colorList = ['var(--color-1)','var(--color-2)','var(--color-3)','var(--color-4)','var(--color-5)','var(--color-6)'];
chars.forEach((char,i)=>{
    const span = document.createElement('span');
    span.className = 'lyrichar';
    span.style.color = colorList;
    span.innerHTML = char === ' ' ? '&nbsp;' : char;
    span.style.transform = `translateY(${i===0?0:i*30}px)`;
    let delay = i*0.08;
    if(/[，。！？,.!?]/.test(char)) delay += 0.08;
    span.style.animationDelay = `${delay}s`;
    lyricDisplay.appendChild(span);
});
}
audioPlayer.addEventListener('timeupdate',()=>{
if(!window.isPlaying || isUpdating) return;
isUpdating = true;
setTimeout(()=>isUpdating=false,100);
const current = audioPlayer.currentTime;
const remaining = audioPlayer.duration - current;
statusDisplay.innerHTML = `<span style="color:#CC00FF">播放中：</span><span style="color:#FF0088">${formatTime(-remaining)}</span>`;
for(let i=0;i<lyrics.length;i++){
    const now = lyrics.time;
    const next = i<lyrics.length-1 ? lyrics.time : Infinity;
    if(current >= now-0.3 && current < next+0.3){
      if(currentLyricIndex !== i){
      currentLyricIndex = i;
      displayLyricCharByChar(lyrics.text);
      }
      break;
    }
}
});
function formatTime(seconds) {
const abs = Math.abs(seconds);
const m = Math.floor(abs/60);
const s = Math.floor(abs%60);
return `${seconds<0?'-':''}${m}:${s<10?'0':''}${s}`;
}
const lrcText = `
粉红的回忆
粉红的回忆
演唱：韩宝仪
夏天夏天悄悄过去留下小秘密
压心底压心底不能告诉您
晚风吹过温暖我心底我又想起您
多甜蜜多甜蜜怎能忘记
不能忘记您把您写在日记里
不能忘记您心里想的还是您
浪漫的夏季还有浪漫的一个您
给我一个粉红的回忆
哦夏天夏天悄悄过去依然怀念您
您一言您一语都叫我回忆
就在就在秋天的梦里我又遇见您
总是不能忘记您
夏天夏天悄悄过去留下小秘密
压心底压心底不能告诉您
晚风吹过温暖我心底我又想起您
多甜蜜多甜蜜怎能忘记
不能忘记您把您写在日记里
不能忘记您心里想的还是您
浪漫的夏季还有浪漫的一个您
给我一个粉红的回忆
哦夏天夏天悄悄过去依然怀念您
您一言您一语都叫我回忆
就在就在秋天的梦里我又遇见您
总是不能忘记您
不能忘记您把您写在日记里
不能忘记您心里想的还是您
浪漫的夏季还有浪漫的一个您
给我一个粉红的回忆
哦夏天夏天悄悄过去依然怀念您
您一言您一语都叫我回忆
就在就在秋天的梦里我又遇见您
总是不能忘记您
`;
function parseLrc(lrc) {
const lyrics = [];
const lines = lrc.trim().split('\n');
const reg = /\[(\d{2}):(\d{2})(?:\.(\d{2}))?\](.*)/;
lines.forEach(line=>{
    const m = line.match(reg);
    if(m){
      const t = +m*60 + +m + +m/100;
      lyrics.push({time:t, text:m.trim()});
    }
});
return lyrics;
}
const lyrics = parseLrc(lrcText);
audioPlayer.addEventListener('ended',()=>{
resetLyrics();
statusDisplay.textContent = '播放结束，可重新播放';
window.isPlaying = false;
fadeOutAllSparkles();
});
audioPlayer.addEventListener('loadedmetadata',()=>{
statusDisplay.textContent = '音频已加载，点击播放开始';
audioPlayer.play().then(()=>{
    window.isPlaying = true;
    statusDisplay.textContent = '音乐加载中...';
    startSparkleLoop();
}).catch(()=>{
    statusDisplay.textContent = '点击图标开始播放';
});
});
audioPlayer.addEventListener('error',()=>{
statusDisplay.textContent = '音频加载失败';
});
function loadScript(url, callback) {
var script = document.createElement('script');
script.src = url;
script.onload = callback;
document.head.appendChild(script);
}
loadScript("https://638183.freep.cn/638183/svgdr/svgdr.min.js", function() {
(function tzRun() {
    var dr = _dr(msvg);
    dr.path('M0 0 C-100 -200,100 -200,0 0', 'transparent', 'gold', 3).addTo(g1).rotates(5);
    dr.circle(0, 0, 12, 'pink');
    function setProperties() {
      const paths = msvg.querySelectorAll('path');
      paths.forEach((path, idx) => {
            path.style.cssText += `
                --len: ${path.getTotalLength()};
                --delay: ${idx * 2}s;
            `;
      });
      paths.onanimationend = () => {
            g1.classList.add('rotate');
      };
    }
    setProperties();
})();
});
let fs = true,fsTimer;
fullscreen.onclick = ()=>{
if(fs){
    fullscreen.innerText = '退出全屏';
    papa.requestFullscreen();
}else{
    fullscreen.innerText = '全屏欣赏';
    document.exitFullscreen();
}
fs = !fs;
};
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => fullscreen.style.opacity = '0', 2500);
});
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
    if (!audioPlayer.paused) audioPlayer.pause();
} else {
    if (audioPlayer.paused && !audioPlayer.ended) audioPlayer.play().catch(()=>{});
}
});
['contextmenu', 'dragstart', 'selectstart'].forEach(ev =>
papa.addEventListener(ev, (e) => { e.preventDefault(); })
);
msvg.onanimationiteration = () => {
msvg.style.setProperty('filter', `hue-rotate(${60 + Math.random() * 300}deg)`);
};
</script>
</body>
</html>

梦江南 发表于 2026-6-11 19:43

欣赏杨帆的特效音画： 粉红的回忆。这小播放用了变色自绘的功能，赞哦！{:4_187:}

梦江南 发表于 2026-6-11 19:43

谢谢杨帆精彩分享。问好！{:4_199:}

梦油 发表于 2026-6-11 19:44

我已经好久没听这支歌啦，谢谢杨帆朋友。

杨帆 发表于 2026-6-11 19:49

梦江南 发表于 2026-6-11 19:43
欣赏杨帆的特效音画： 粉红的回忆。这小播放用了变色自绘的功能，赞哦！

谢谢江南鼓励~这是学习马老师最近发的帖子小播，在此向马老师表示感谢{:4_190:}

杨帆 发表于 2026-6-11 19:51

梦油 发表于 2026-6-11 19:44
我已经好久没听这支歌啦，谢谢杨帆朋友。

很喜欢的一首老歌，发出来分享一下，谢谢梦兄鼓励{:4_190:}

霜染枫丹 发表于 2026-6-11 19:59

欣赏赞佩扬帆的好制作~~祝制作愉快！{:4_204:}{:4_190:}

也曾年轻 发表于 2026-6-11 20:16

https://p9.itc.cn/q_70/images03/20221130/7fc3971d6f9341ff85b350ff047bfae8.gif

杨帆 发表于 2026-6-11 20:19

霜染枫丹 发表于 2026-6-11 19:59
欣赏赞佩扬帆的好制作~~祝制作愉快！

谢谢枫丹老师鼓励，祝开心{:4_204:}

杨帆 发表于 2026-6-11 20:19

也曾年轻 发表于 2026-6-11 20:16


谢谢年轻老师鼓励，祝开心{:4_180:}

梦油 发表于 2026-6-11 20:30

杨帆 发表于 2026-6-11 19:51
很喜欢的一首老歌，发出来分享一下，谢谢梦兄鼓励

是的，我我很喜欢老歌红歌。

杨帆 发表于 2026-6-11 20:34

梦油 发表于 2026-6-11 20:30
是的，我我很喜欢老歌红歌。

赞同~有些老歌红歌久听不厌，有很强的生命力

红影 发表于 2026-6-11 21:59

制作漂亮，歌曲好听，欣赏杨帆好帖{:4_187:}

小辣椒 发表于 2026-6-11 22:25

杨帆晚上好，我刷新二次了还是没有看见

小辣椒 发表于 2026-6-11 22:26

你这个是免费空间上传的？我去你上传的网盘打开看见了

小辣椒 发表于 2026-6-11 22:27

欣赏杨帆精彩的制作{:4_187:}

杨帆 发表于 2026-6-11 23:11

红影 发表于 2026-6-11 21:59
制作漂亮，歌曲好听，欣赏杨帆好帖

谢谢影子鼓励，祝开心{:4_204:}

杨帆 发表于 2026-6-11 23:15

本帖最后由 杨帆 于 2026-6-11 23:16 编辑

小辣椒 发表于 2026-6-11 22:25
杨帆晚上好，我刷新二次了还是没有看见
问好小辣椒，第一次直接发代码显示正常。后来编辑再发显示就不正常了，不知起因，只好改发网页空间帖了

杨帆 发表于 2026-6-11 23:18

小辣椒 发表于 2026-6-11 22:26
你这个是免费空间上传的？我去你上传的网盘打开看见了

是啊，你在哪个网盘看到的呀

杨帆 发表于 2026-6-11 23:19

小辣椒 发表于 2026-6-11 22:27
欣赏杨帆精彩的制作

鼓捣着玩呢，谢谢小辣椒鼓励，祝开心{:4_204:}
页: [1] 2
查看完整版本: 粉红的回忆