醉美水芙蓉 发表于 5 天前

清香绕指尖

<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: 10%;
                top: 20%;
                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://bbs.cnzv.cc/up/upload/pic/12/20260424-c2e2506e30fcfb0315b9ce3bd5e0e9d6.jpg">
        <img id="dynamicBg" src="https://bbs.cnzv.cc/up/upload/pic/12/20260424-c2e2506e30fcfb0315b9ce3bd5e0e9d6.jpg" 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://www.joy127.com/url/148965.mp3" 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 = `
清香绕指尖
作词: 一笑
作曲: 一笑
LRC编辑：醉美水芙蓉
清晨一碗热奶茶
窗外葡萄架影斑斑
转动手里小转环哎
心里小事也轻慢
院里石榴开得艳
羊群远远叫一遍
我把旧愁丢门前哟
随那尘土被风卷
我有清香绕指尖哎呀
我有清香绕指尖哎呀
烦恼呀都走远
不急不慌不纠缠哟
心里似清泉
风也温柔云也淡
日子缓缓甜
从容洒脱每一天
自在胜神仙哎哟
我有清香绕指尖哎呀
暖意满心田
不争不抢不埋怨哟
万事顺自然
守得一份心清净
活得有清欢
人间处处皆温柔
岁岁常安然
傍晚炊烟绕屋檐
星子一颗一颗亮
我在门口小竹凳哎
唱段旧歌给月亮
葡萄干里藏着甜
笑声挂在每张脸
日历翻过多少页哟
静看四季换新颜
浮生好似一场梦啊哈
醒来茶还香
心宽一点路就宽哎耶哎
天地都是家乡
不必匆忙不必赶哟
不必愁绪添
心怀芬芳向暖阳
四季皆春天哎呀哟
我有清香绕指尖哎呀
烦恼呀都走远
不急不慌不纠缠哟
心里似清泉
风也温柔云也淡
日子缓缓甜
从容洒脱每一天
自在胜神仙哎哟
我有清香绕指尖哎呀
暖意满心田
不争不抢不埋怨哟
万事顺自然
守得一份心清净
活得有清欢
人间处处皆温柔
岁岁常安然
谢谢欣赏！
`;
       
        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://bbs.cnzv.cc/up/upload/pic/12/20260424-d96da7b3232a1c5d69fa70917b947def.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>

klxf 发表于 5 天前

漂亮~谢谢友友精彩分享

醉美水芙蓉 发表于 5 天前

klxf 发表于 2026-4-25 12:29
漂亮~谢谢友友精彩分享

谢谢友友光临！

zaiyanjiu 发表于 4 天前

感谢分享，引发深入探讨

posunbianxing 发表于 4 天前

感谢分享，增长生活经验

轻言 发表于 3 天前

路过还不错

zuijiazhiliao 发表于 前天 05:10

赞，顶帖内容引人深思

changqinggongan 发表于 昨天 11:07

学习一下！十分感谢

爱站 发表于 9 小时前

感谢分享，充满生活智慧
页: [1]
查看完整版本: 清香绕指尖