论坛 › 欢乐水吧 › 天琪 - 我中了你的情毒

亚伦影音工作室 发表于 2026-3-18 18:58

天琪 - 我中了你的情毒

本帖最后由 亚伦影音工作室 于 2026-3-18 18:58 编辑 <br /><br /><style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&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: 1260px;height: 720px;left: calc(50% - 81px);transform: translateX(-50%);box-shadow: 3px 3px 6px gray;overflow: hidden;z-index: 10000;background: #000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6a1924b5e3a4fb99f7f8dd78cc039703.jpg) no-repeat center/cover;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";
}

.vid {position: absolute;top:0%; left:0%;object-fit: cover;
pointer-events: none;
      width: 100%;
      height: 100%;animation: round 36s linear infinite;box-shadow: 0px 0px 0px 3px #fff;    opacity: 0;}
      
      
.vid:nth-of-type(6) {animation-delay: 30s;
      
       }
.vid:nth-of-type(5) {animation-delay: 24s;
      
       }
.vid:nth-of-type(4) {animation-delay: 18s;
      
      }
.vid:nth-of-type(3) {animation-delay: 12s;
      
      }
.vid:nth-of-type(2) {animation-delay: 6s;
      
      }
.vid:nth-of-type(1) {animation-delay: 0s;
      }
.stop .vid:nth-child(1),
.stop .vid:nth-child(2),
.stop .vid:nth-child(3),
.stop .vid:nth-child(4),
.stop .vid:nth-child(5),
.stop .vid:nth-child(6){animation-play-state: paused;}
      
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(0.4)translate(-35%,0%);
opacity:1}
5% {
-webkit-transform:rotate(0)scale(0.4)translate(-35%,0%);
opacity:0.8}

10% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:1}
14% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:1}
16% {
-webkit-transform:rotate(0deg)scale(0.4)translate(-35%,0%);
opacity:1}
22% {
-webkit-transform:rotate(0deg)scale(0.4)translate(-35%,0%);
opacity:0}
}

#lyric {position: absolute;left: 50%;bottom: 3%;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 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);font-size: 3.5em;}
#lyricDisplay{height: 100%;letter-spacing: 0px;display: flex;align-items: center;justify-content: center;overflow: hidden;position: relative;padding: 0 1em;width: 100%;animation:rotd 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 rotd {to {filter: hue-rotate(360deg);}}
#player{position:absolute;top: 65%;z-index: 99;
            left: 13%;
width: 150px;
height: 150px;
display: grid;
        place-items: center;animation: rot 8s linear infinite ;}
#rect {position: absolute;
        display: grid;
        place-items: center;
width:35%;
height: 35%;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}

#statusDisplay{position: absolute;z-index: 1;font-size: 1.5em;font-weight: 500;left: 65%;top: 5%;color:#fff}

#fullscreen{border-radius: 4px;position: absolute;
color:#fff;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 120;
font-size: 30px;
border: none;
cursor: pointer;top: 5px;left: 8%;
}


</style>

<div id="papa">
<div id="fullscreen" title="屏展模式">全屏欣赏</div>
<div id='testImg'>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/02f634c504d7e9677ce68fd46f45c707_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/8d4777b0352ad586975dfdf1526ca0a8_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/8e05b06a403e365c955ab9ca2fb57528_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/1d4099037af8322c877c2b8ee9bdd8b4_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/ed078848c1b6b53581d198e77ee43b91_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c955ded97ac2dc6a432b26ff45e7bad8_preview.mp4" loop muted autoplay=""></video>
</div>
<divid="statusDisplay">播放中: -2:20 </div>

<div id="player">
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
</div>

<div id="lyric">
<div id="lyricDisplay" ></div>
</div>
<audio id="aud" src="https://s2.cldisk.com/sv-w9/audio/06/78/da/880cbfff6158e0a676a8e4252409defe/audio.mp3" loop autoplay ></audio>
</div>
       
<script>
const papa = document.getElementById('papa');
const audioPlayer = document.getElementById('aud');
const starfishPlayer =document.getElementById('player');
const lyricDisplay = document.getElementById('lyricDisplay');
const statusDisplay = document.getElementById('statusDisplay');

let currentLyricIndex = -1;
let isUpdating = false;
window.isPlaying = false;
let isMuted = true;
let fsTimer = null;
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`);
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 < 15; i++) {
createSingleSparkle();
}
sparkleInterval = setInterval(() => {
if (window.isPlaying) {
createSingleSparkle();
}
}, 500);
}
function stopSparkleLoop() {
clearInterval(sparkleInterval);
sparkleInterval = null;
}
function fadeOutAllSparkles() {
stopSparkleLoop();
sparklesContainer.classList.add('fade-out');
document.querySelectorAll('.sparkle').forEach(sparkle => {
sparkle.classList.add('hidden');
});
setTimeout(() => {
sparklesContainer.innerHTML = '';
}, 800);
}
function resetLyrics() {
currentLyricIndex = -1;
lyricDisplay.innerHTML = '';
}
function togglePlayPause() {
if (audioPlayer.paused) {
if (audioPlayer.currentTime <= 0.5) {
resetLyrics();
}
audioPlayer.play()
.then(() => {

window.isPlaying = true;
starfishPlayer.classList.remove('paused');
starfishPlayer.classList.add('playing');
statusDisplay.textContent = '播放中...';
startSparkleLoop();
})
.catch(error => {
console.error('播放失败:', error);
statusDisplay.textContent = '播放失败，请检查音频文件';
});
} else {
audioPlayer.pause();

window.isPlaying = false;
starfishPlayer.classList.remove('playing');
starfishPlayer.classList.add('paused');
statusDisplay.textContent = '已暂停';
fadeOutAllSparkles();
}
}
audioPlayer.addEventListener('play', () => {
animatedGif.classList.add('active');
staticImage.classList.remove('active');
});
audioPlayer.addEventListener('pause', () => {
staticImage.classList.add('active');
animatedGif.classList.remove('active');
});
starfishPlayer.addEventListener('click', (e) => {
e.stopPropagation();
togglePlayPause();
});
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;
if (char === ' ') {
span.innerHTML = '&nbsp;';
} else {
span.textContent = char;
}
const offset = i === 0 ? 0 : i * 30;
span.style.transform = `translateY(${offset}px)`;
span.style.animationDelay = `${i * 0.08}s`;
if (/[，。！？,.!?]/.test(char)) {
span.style.animationDelay = `${i * 0.08 + 0.08}s`;
}
lyricDisplay.appendChild(span);
});
}
audioPlayer.addEventListener('timeupdate', () => {
if (!window.isPlaying) return;
if (isUpdating) return;
isUpdating = true;
setTimeout(() => isUpdating = false, 100);
const currentTime = audioPlayer.currentTime;
const remainingTime = audioPlayer.duration - currentTime;
statusDisplay.textContent = `播放中: ${formatTime(-remainingTime)}`;
for (let i = 0; i < lyrics.length; i++) {
const currentLyricTime = lyrics.time;
const nextLyricTime = i < lyrics.length - 1 ? lyrics.time : Infinity;
if (currentTime >= currentLyricTime - 0.3 && currentTime < nextLyricTime + 0.3) {
if (currentLyricIndex !== i) {
currentLyricIndex = i;
displayLyricCharByChar(lyrics.text);
}
break;
}
}
});
function formatTime(seconds) {
const absSeconds = Math.abs(seconds);
const mins = Math.floor(absSeconds / 60);
const secs = Math.floor(absSeconds % 60);
const sign = seconds < 0 ? '-' : '';
return `${sign}${mins}:${secs < 10 ? '0' : ''}${secs}`;
}
const lrcText = ` 我中了你的情毒
演唱：天琪
出品：亚伦影音工作室
只是在人群中偷偷看了一眼你
我的三魂七魄全都被你悄悄的钩去
闭上眼睛全都是你爱你爱得太痴迷
就算轮回千次万次我依然要找到你
我中了你的情毒
已无药可医
哪怕你是冰山
我也要融化你
只要今生今世
能和你相依
就算拿命来换
我也和你在一起
只是在人群中偷偷看了一眼你
我的三魂七魄全都被你悄悄的钩去
闭上眼睛全都是你爱你爱得太痴迷
就算轮回千次万次我依然要找到你
我中了你的情毒
已无药可医
哪怕你是冰山
我也要融化你
只要今生今世
能和你相依
就算拿命来换
我也和你在一起
我中了你的情毒
已无药可医
哪怕你是冰山
我也要融化你
只要今生今世
能和你相依
就算拿命来换
我也和你在一起

`;
function parseLrc(lrc) {
const lyrics = [];
const lines = lrc.trim().split('\n');
const lrcRegex = /\[(\d{2}):(\d{2})\.(\d{2})\](.*)/;
lines.forEach(line => {
const match = line.match(lrcRegex);
if (match) {
const minutes = parseInt(match);
const seconds = parseInt(match);
const ms = parseInt(match);
const totalSeconds = minutes * 60 + seconds + ms / 100;
const text = match.trim();
lyrics.push({
time: totalSeconds,
text: text
});
}
});
return lyrics;
}
const lyrics = parseLrc(lrcText);
audioPlayer.addEventListener('ended', () => {
resetLyrics();
starfishPlayer.classList.remove('playing');

starfishPlayer.classList.add('paused');

statusDisplay.textContent = '播放结束，可重新播放';
window.isPlaying = false;
fadeOutAllSparkles();
});
audioPlayer.addEventListener('loadedmetadata', () => {
statusDisplay.textContent = '音频已加载，点击播放开始';
tryAutoPlay();
});

audioPlayer.addEventListener('error', (e) => {
console.error('音频错误:', e);
statusDisplay.textContent = '音频加载失败，请检查文件路径';
});
function tryAutoPlay() {
audioPlayer.play()
.then(() => {

window.isPlaying = true;
starfishPlayer.classList.remove('paused');
starfishPlayer.classList.add('playing');
statusDisplay.textContent = '音乐加载中...';
startSparkleLoop();
})
}
let fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
                papa.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };

let mState = () => aud.paused ? (player.style.animationPlayState = 'paused',image.classList.add('stop'),lyricDisplay.style.animationPlayState = 'paused' ) : (player.style.animationPlayState = 'running',image.classList.remove('stop'),lyricDisplay.style.animationPlayState = 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
var image = document.getElementById("testImg");
(function() {
      const vids = document.querySelectorAll('.vid');
      var mState = () => {
         vids.forEach(vid => aud.paused ? vid.pause():vid.play());
      };
aud.onplaying = aud.onpause = () => mState();
})();
</script>

梦油 发表于 2026-3-18 19:44

欣赏佳作，问候亚伦。

杨帆 发表于 2026-3-18 22:57

制作精美，效果惊艳，谢谢亚伦老师分享{:4_191:}

红影 发表于 2026-3-19 00:07

漂亮的制作效果，欣赏亚伦老师好帖{:4_199:}

老谟深虑 发表于 2026-3-21 09:10

         制作精美，歌曲好听。

查看完整版本: 天琪 - 我中了你的情毒