小辣椒 发表于 2026-1-23 22:25

动了情的人（Live合唱版）


<style>
        @import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css?v=1';
        #tz {
                margin: 140px 0 30px calc(50% - 750px);
                width: 1346px;
                height:771px;
                background: #000;
                border-radius:32px;
                position: relative;
                overflow: hidden;
                --state: running;
                --main-color: #efede2;
        }
        #lrcDiv {
                writing-mode: vertical-rl;
                right: 70%;
                top: 12%;
                text-align: left;
                color: #ffffff;
                --hlcolor: #67acf9;
                z-index: 999;
        }
        #mplayer, #fsbtn, #playimg {
                display: none !important;
        }
        .vid {
                opacity: .05;
                z-index: 1;
        }
       
        #staticBg {
                width:1346px;
                height:771px;
                position:absolute;
                left: 0px;
                top: 0px;
                z-index: 1;
                display: none;
        }
       
        #dynamicBg {
                width:1346px;
                height:771px;
                position:absolute;
                left: 0px;
                top: 0px;
                z-index: 2;
                display: block;
        }
        .ma {
                position: absolute;
                width: 90px;
                height: 90px;
                left: 43%;
                bottom: 55px;
                z-index: 999;
                cursor: pointer;
                transition: transform 0.3s ease;
                animation: rotate 8s linear infinite var(--state);
        }
       
        .ma:hover {
                transform: scale(1.1);
        }
        @keyframes rotate {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
        }
       
        .prog {
                position: absolute;
                width: 240px;
                height: 6px;
                background: linear-gradient(to right, var(--main-color) var(--prg, 0%), transparent 0%);
                border: 2px solid var(--main-color);
                border-radius: 5px;
                bottom: 30px;
                left: 47%;
                transform: translateX(-50%);
                z-index: 999;
                cursor: pointer;
                transition: all 0.3s ease;
        }
       
        .prog:hover {
                height: 12px;
                background: linear-gradient(to right, var(--main-color) var(--prg, 0%), #333 0%);
        }
        .time-display {
                position: absolute;
                width: 360px;
                left: 47%;
                transform: translateX(-50%);
                bottom: 25px;
                z-index: 999;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: var(--main-color);
                font: normal 14px sans-serif;
                pointer-events: none;
                background: transparent;
        }
       
        .current-time, .total-time {
                background: transparent;
                padding: 2px 8px;
                border-radius: 4px;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
                color: var(--main-color);
                font-weight: bold;
        }
       
        .lrc-paused {
                animation-play-state: paused !important;
                --state: paused !important;
                opacity: 0.9;
                filter: grayscale(0.3);
        }
</style>

<div id="tz" class="pa">

        <img id="staticBg" src="https://xlaj.cn/upfile/2026/01/23/3F.jpg">
        <img id="dynamicBg" src="https://xlaj.cn/upfile/2026/01/23/3F.gif" id='bj'>
       
        <video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/52/5ec746f5eec22.mp4" autoplay loop></video>
        <audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/1874-audiofreehighqps/41/FB/GAqhp50M0p5VACAAAAQpnCkh.m4a" autoplay loop></audio>
</div>
<div class="zw"></div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js?v=1';
       
        var isPlaying = true;
        var isGifPlaying = true;       
        var gc = `
动了情的人（Live合唱版）
作曲：阿末@走心音乐
演唱：群星      
当初对我承诺地久天长
现在看来确实太过荒唐
对于你来讲不论谁在身旁
都只是临时爱一场
如果早知道会变成这样
就不该把心交到你手上
直到受过了伤才看清真相
无数次失眠到天亮
动了情的人才会觉得夜漫长
毕竟放不下的心事最难藏
誓言说的漂亮不过是你撒的谎
留我一个人空想到天亮
动了情的人才会觉得夜太长
只怪念念不忘却得不到回响
努力付出一场最后红了眼眶
所有期待成了昂贵奢望
歌词同步编辑：小辣椒
如果早知道会变成这样
就不该把心交到你手上
直到受过了伤才看清真相
无数次失眠到天亮
动了情的人才会觉得夜漫长
毕竟放不下的心事最难藏
誓言说的漂亮不过是你撒的谎
留我一个人空想到天亮
动了情的人才会觉得夜太长
只怪念念不忘却得不到回响
努力付出一场最后红了眼眶
所有期待成了昂贵奢望
谢谢欣赏
`;
       
        hcplay(tz, gc, 7);

        const videoElement = document.querySelector('.vid');
        const audioElement = document.getElementById('aud');
        const lrcDiv = document.getElementById('lrcDiv');
        const staticBg = document.getElementById('staticBg');
        const dynamicBg = document.getElementById('dynamicBg');
       
        const existingButtons = document.querySelectorAll('.ma, #playimg, #mplayer, #fsbtn');
        existingButtons.forEach(btn => {
                if (btn.parentNode) {
                        btn.parentNode.removeChild(btn);
                }
        });

        const playimg = document.createElement('img');
        playimg.className = 'ma';
        playimg.src = 'https://xlaj.cn/upfile/2026/01/23/la.png';
        playimg.title = '点击播放/暂停 (空格键)';
        tz.appendChild(playimg);

        const progressBar = document.createElement('div');
        progressBar.className = 'prog';
        progressBar.title = '点击调节播放进度';
        tz.appendChild(progressBar);

        const timeDisplay = document.createElement('div');
        timeDisplay.className = 'time-display';

        const currentTime = document.createElement('span');
        currentTime.className = 'current-time';
        currentTime.textContent = '0:00';
        timeDisplay.appendChild(currentTime);
       
        const totalTime = document.createElement('span');
        totalTime.className = 'total-time';
        totalTime.textContent = '0:00';
        timeDisplay.appendChild(totalTime);
       
        tz.appendChild(timeDisplay);

        function formatTime(seconds) {
                const mins = Math.floor(seconds / 60);
                const secs = Math.floor(seconds % 60);
                return `${mins}:${secs.toString().padStart(2, '0')}`;
        }

        function updateProgressBar() {
                if (audioElement.duration) {
                        const progress = (audioElement.currentTime / audioElement.duration) * 100;
                        progressBar.style.setProperty('--prg', progress + '%');

                        currentTime.textContent = formatTime(audioElement.currentTime);
                        totalTime.textContent = formatTime(audioElement.duration);
                }
        }
       
        progressBar.addEventListener('click', (e) => {
                if (audioElement.duration) {
                        const rect = progressBar.getBoundingClientRect();
                        const percent = (e.clientX - rect.left) / rect.width;
                        audioElement.currentTime = percent * audioElement.duration;
                }
        });

        audioElement.addEventListener('timeupdate', updateProgressBar);
        audioElement.addEventListener('loadedmetadata', updateProgressBar);

        function togglePlayState() {
                if (isPlaying) {

                        audioElement.pause();
                        videoElement.pause();

                        staticBg.style.display = 'block';
                        dynamicBg.style.display = 'none';
                        isGifPlaying = false;

                        if (lrcDiv) {
                                lrcDiv.classList.add('lrc-paused');
                                lrcDiv.style.setProperty('--lrc-state', 'paused');
                        }

                        tz.style.setProperty('--state', 'paused');
                        isPlaying = false;
                } else {

                        audioElement.play();
                        videoElement.play();

                        staticBg.style.display = 'none';
                        dynamicBg.style.display = 'block';
                        isGifPlaying = true;

                        if (lrcDiv) {
                                lrcDiv.classList.remove('lrc-paused');
                                lrcDiv.style.setProperty('--lrc-state', 'running');
                        }

                        tz.style.setProperty('--state', 'running');
                        isPlaying = true;
                }
        }

        playimg.addEventListener("click", togglePlayState);

        document.addEventListener('keydown', function(event) {
                if (event.code === 'Space' && !event.target.matches('input, textarea, select')) {
                        event.preventDefault();
                        togglePlayState();
                }
        });
       

        setTimeout(() => {
                if (lrcDiv && isPlaying) {
                        lrcDiv.style.setProperty('--lrc-state', 'running');
                        lrcDiv.classList.remove('lrc-paused');
                }
                tz.style.setProperty('--state', 'running');
        }, 100);
</script>

liumang 发表于 2026-1-23 23:31

{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2026-1-23 23:32

小辣椒晚上好，漂亮的动图背景

liumang 发表于 2026-1-23 23:33

小播制作漂亮，可以一键全停止，不错，不错

{:5_146:}{:5_146:}

admin 发表于 2026-1-25 21:01

那个动了情，，{:5_118:}{:5_118:}
页: [1]
查看完整版本: 动了情的人（Live合唱版）