论坛 › 欢乐水吧 › 唱花儿的花儿

杨帆 发表于 2025-6-2 20:25

唱花儿的花儿

本帖最后由 杨帆 于 2025-6-4 00:28 编辑 <br /><br /> <style>
      #papa {
            --state: running;
            margin: 30px 0;
            left: calc(50% - 81px);
            transform: translateX(-50%);
            width:1400px;
            height:750px;
            aspect-ratio: 16/9;
            background: url('https://cccimg.com/view.php/862e7d7baa5b74b48b1ce5de2d472243.jpg') 0/100%;
            box-shadow: 3px 3px 6px 6px gray;
            position: relative;
            overflow: hidden;
            z-index: 1;
      }
      #dt {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            mix-blend-mode: screen;
            z-index: -1;
      }
      #dt img {
            width: 100%;
            height: 100%;
            object-fit: cover;
      }
      #pa {
            width: 22%;
            height: 22%;
            left: 40%;
            top: 20%;
            cursor: pointer;
            position: absolute;
            overflow: hidden;
            z-index: 10;
            opacity: .5;
            transition: 0.3s all ease;
      }
      #pa:hover {
            transform: scale(1.1);
            filter: drop-shadow(0 0 80px Gold);
      }
      .lrc {
            position: absolute;
            top: 16%;
            left: 60%;
            width: 540px;
            height: 250px;
            overflow: hidden;
      }
      .lrc #ul {
            width: 100%;
            padding: 0;
            list-style: none;
            transition: 0.3s all ease;
            margin: 0;
      }
      .lrc #ul li {
            color: #fff;
            font: normal 28px 'YouYuan', sans-serif;
            transition: .3s all ease;
            list-style-type: none;
            text-align: center;
            display: block;
            padding: 0 10px;
            height: 50px;
            line-height: 50px;
            margin: 0 auto;
      }
      .lrc #ul li.active {
            transform: scale(1.2);
            color: #33FF33;
            font-weight: 650;
            text-align: center;
      }
      #vid1 {
            width: 100%;
            height: 100%;
            z-index: -1;
            position: absolute;
            left: 0;
            top: 0;
            opacity: .99;
            object-fit: cover;
            pointer-events: none;
            mask: radial-gradient(transparent 20%, red);
            -webkit-mask: radial-gradient(transparent 20%, red);
            loading: lazy;
      }
      #vid2 {
            position: absolute;
            width: 150px;
            height: 240px;
            left: 45.5%;
            top: 44%;
            object-fit: cover;
            aspect-ratio: .8;
            border: 2px solid #ccc;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3) inset;
            border-radius: 50%;
            mix-blend-mode: unset;
            mask: radial-gradient(red 18%, red 2%, transparent);
            -webkit-mask: radial-gradient(red 18%, red 2%, transparent);
            z-index: 3;
            opacity: .88;
      }
      #progress {
            position: absolute;
            bottom: 10%;
            right: 26.5%;
            width: 600px;
            height: 3px;
            background: #666;
            cursor: pointer;
            z-index: 5;
      }
      #progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #fa4354, #18f5f8);
            width: 0;
            transition: width 0.1s;
            position: relative;
      }
      .time-info {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            font-size: 14px;
            font-family: Arial, sans-serif;
      }
      #current-time {
            left: -50px;
      }
      #total-time {
            right: -50px;
      }
      #bt {
            color: #bff21c;
            position: absolute;
            left: 18%;
            top: 6%;
            font-size: 40px;
            font-family: 华文宋体;
            z-index: 1;
            animation: yd 20s linear infinite var(--state);
            filter: drop-shadow(#ffffff 1px 0 0)
                  drop-shadow(#ffffff 0 1px 0)
                  drop-shadow(#ffffff -1px 0 0)
                  drop-shadow(#ffffff 0 -1px 0);
      }
      @keyframes yd {
            50% {
                opacity: 1;
                left: 60%;
            }
      }
    </style>
    <div id="papa">
      <div id="dt">
            <img src="https://pic1.imgdb.cn/item/67564aedd0e0a243d4e015f5.gif" id="Img" style="mix-blend-mode: screen" alt=" "></div>
      <svg id="bsvg" width="1400" height="750">
                <rect x="0" y="0" width="100%" height="100%" rx="8" ry="5" fill="none" stroke="#60949090" stroke-width="8" stroke-dasharray="8 4">
                        <animate attributeName="stroke-dashoffset" from="0" to="-48" dur="2s" begin="0s" repeatCount="indefinite"/>
                </rect>
        </svg>
      <video id="vid1" src="https://bpic.588ku.com/video_listen/588ku_video/24/11/01/15/25/07/video672482533234e.mp4" loop muted autoplay loading="lazy"></video>
      <video id="vid2" src="https://cccimg.com/view.php/7e77e175b6f7c8be7849cd20c561668e.mp4" loop muted autoplay></video>
      <div id="bt">唱花儿的花儿</div>
      <div id="pa" title="播放/暂停"></div>
      <div id="progress">
            <span id="current-time" class="time-info">00:00</span>
            <div id="progress-bar"></div>
            <span id="total-time" class="time-info">00:00</span>
      </div>
      <div class="lrc" id="dhgc">
            <ul id="ul"></ul>
      </div>
    </div>
    <audio id="audio" src="https://cccimg.com/view.php/94f3f092105c22d95e31c6d357658709.mp3" loop autoplay></audio>
    <script type="module">
      import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.min.js';
      const scene = new THREE.Scene();
      const clock = new THREE.Clock();
      const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.set(0, 0, 3);
      const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      const pa = document.getElementById('pa');
      renderer.setSize(pa.offsetWidth, pa.offsetHeight);
      pa.appendChild(renderer.domElement);
      const textureLoader = new THREE.TextureLoader();
      textureLoader.load(
            'https://pic.imgdb.cn/item/65b75c8f871b83018a83e1c1.png',
            (texture) => {
                texture.colorSpace = THREE.SRGBColorSpace;
                texture.wrapS = THREE.RepeatWrapping;
                texture.wrapT = THREE.RepeatWrapping;
                texture.repeat.set(12, 8);
                const ball = new THREE.Mesh(
                  new THREE.SphereGeometry(),
                  new THREE.MeshBasicMaterial({ map: texture, transparent: true })
                );
                scene.add(ball);         
                let angle = 0;
                const animate = () => {
                  const delta = clock.getDelta();
                  angle += delta;
                  ball.rotation.y -= delta / 2;
                  camera.position.x = 1 * Math.cos(angle);
                  camera.position.y = 1 * Math.sin(angle);
                  camera.lookAt(0, 0, 0);
                  renderer.render(scene, camera);
                  requestAnimationFrame(animate);
                };
                animate();
            },
            undefined,
            (error) => console.error('纹理加载失败:', error)
      );
      window.onresize = () => {
            camera.aspect = pa.offsetWidth / pa.offsetHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(pa.offsetWidth, pa.offsetHeight);
      };
      pa.onclick = () => {
            const audio = document.getElementById('audio');
            const videos = document.querySelectorAll('video');
            const Img = document.getElementById('Img');
            const bt = document.getElementById('bt');
            const bsvg = document.getElementById('bsvg');
            
            if (audio.paused) {
                audio.play();
                videos.forEach(v => v.play());
                Img.style.opacity = '0.9';
                bt.style.setProperty('--state', 'running');
                bsvg.unpauseAnimations();
               
                clock.start();
            } else {
                audio.pause();
                videos.forEach(v => v.pause());
                Img.style.opacity = '0';
                bt.style.setProperty('--state', 'paused');
                bsvg.pauseAnimations();
               
                clock.stop();
            }
      };
    </script><script>
      const lrc = `唱花儿的花儿 - 杨烁
词：路勇/金明
曲：路勇
制作人：姬熙
我是唱花儿的花儿呦
沙柳叶叶青呦
沙棘果果黄
清水湖的蛙鸣声悠扬
梯田层层高呦
云儿朵朵白
葫芦河水流过我的家乡
丁香花芬芳呦
芦苇轻轻荡
圆溜溜的金蛋蛋满口香
笑容最纯真呦 心地最善良
西吉就是我美丽的家乡
我是唱花儿的花儿呦
我的花儿唱红火石寨的山尖尖
天有多蓝 路有多远
我的花儿就有多灿烂
我是唱花儿的花儿呦
我的花儿唱绿辽阔地黄土大高原
再苦再累
都觉得甜
我的花儿唱醉西吉的山和川
丁香花芬芳呦
芦苇轻轻荡
圆溜溜的金蛋蛋满口香
笑容最纯真呦 心地最善良
西吉就是我美丽的家乡
我是唱花儿的花儿呦
我的花儿唱红火石寨的山尖尖
天有多蓝 路有多远
我的花儿就有多灿烂
我是唱花儿的花儿呦
我的花儿唱绿辽阔地黄土大高原
再苦再累
都觉得甜
我的花儿唱醉西吉的山和川
我是唱花儿的花儿呦
我的花儿唱红火石寨的山尖尖
天有多蓝 路有多远
我的花儿就有多灿烂
我是唱花儿的花儿呦
我的花儿唱绿辽阔地黄土大高原
再苦再累
都觉得甜
我的花儿唱醉西吉的山和川`;
      const lrcArr = lrc.split('\n').filter(line => line.trim() !== '');
      const result = [];
      const parseTime = (lrcTime) => {
            const = lrcTime.split(':').map(Number);
            return minutes * 60 + seconds;
      };
      lrcArr.forEach(line => {
            const timeMatch = line.match(/\[(\d{2}:\d{2}\.\d{2})\]/);
            if (!timeMatch) return;
            const timePart = timeMatch.replace(/\.\d{2}$/, '');
            const lyric = line.replace(timeMatch, '').trim() || ' ';
            result.push({ time: parseTime(timePart), word: lyric });
      });
      const doms = {
            audio: document.getElementById('audio'),
            ul: document.getElementById('ul'),
            container: document.querySelector('.lrc'),
            progress: document.getElementById('progress'),
            progressBar: document.getElementById('progress-bar'),
            currentTime: document.getElementById('current-time'),
            totalTime: document.getElementById('total-time')
      };
      const createLyricElements = () => {
            const frag = document.createDocumentFragment();
            result.forEach(({ word }) => {
                const li = document.createElement('li');
                li.textContent = word;
                frag.appendChild(li);
            });
            doms.ul.appendChild(frag);
      };
      createLyricElements();
      let liHeight = 0;
      const updateLyricPosition = () => {
            if (liHeight === 0) liHeight = doms.ul.children?.clientHeight || 50;
            const currentTime = doms.audio.currentTime;
            const index = result.findIndex(item => item.time > currentTime) - 1;
            if (index < 0) return;
            const containerHeight = doms.container.clientHeight;
            const offset = liHeight * index - containerHeight / 2 + liHeight / 2;
            doms.ul.style.transform = `translateY(-${Math.max(0, Math.min(offset, doms.ul.clientHeight - containerHeight))}px)`;
            const activeLi = doms.ul.querySelector('.active');
            if (activeLi) activeLi.classList.remove('active');
            const currentLi = doms.ul.children;
            if (currentLi) currentLi.classList.add('active');
      };
      const updateProgress = () => {
            const currentTime = doms.audio.currentTime;
            const duration = doms.audio.duration;
            if (isNaN(duration) || duration === 0) return;
            const progress = (currentTime / duration) * 100;
            doms.progressBar.style.width = `${progress}%`;
            doms.currentTime.textContent = formatTime(currentTime);
            doms.totalTime.textContent = formatTime(duration);
      };
      const formatTime = (time) => {
            const minutes = Math.floor(time / 60);
            const seconds = Math.floor(time % 60);
            return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
      };
      doms.progress.addEventListener('click', (e) => {
            const rect = doms.progress.getBoundingClientRect();
            const clickX = e.clientX - rect.left;
            const progress = clickX / rect.width;
            const newTime = progress * doms.audio.duration;
            if (!isNaN(newTime)) doms.audio.currentTime = newTime;
      });
      doms.audio.addEventListener('loadedmetadata', () => {
            updateProgress();
      });
      doms.audio.addEventListener('timeupdate', updateProgress);
      doms.audio.addEventListener('timeupdate', updateLyricPosition);
    </script>

红影 发表于 2025-6-2 21:16

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

梦江南 发表于 2025-6-3 07:04

杨帆老师真厉害，这么快就把小姑娘跳舞用进去了，赞！{:4_187:}

杨帆 发表于 2025-6-3 08:13

梦江南 发表于 2025-6-3 07:04
杨帆老师真厉害，这么快就把小姑娘跳舞用进去了，赞！

呵呵，鼓捣着玩呢，喜欢你制作的这个小姑娘跳舞视频{:4_187:}

梦江南 发表于 2025-6-3 10:07

杨帆 发表于 2025-6-3 08:13
呵呵，鼓捣着玩呢，喜欢你制作的这个小姑娘跳舞视频

老师喜欢就尽管用。

杨帆 发表于 2025-6-3 13:10

梦江南 发表于 2025-6-3 10:07
老师喜欢就尽管用。

大家风范，谢谢江南{:4_187:}

梦江南 发表于 2025-6-3 14:57

杨帆 发表于 2025-6-3 13:10
大家风范，谢谢江南

这又不值钱，只要大家开心就好。

杨帆 发表于 2025-6-3 15:40

梦江南 发表于 2025-6-3 14:57
这又不值钱，只要大家开心就好。

谢谢认同“独乐乐不如众乐乐，众乐乐不如与人乐乐”。

梦江南 发表于 2025-6-3 16:27

杨帆 发表于 2025-6-3 15:40
谢谢认同“独乐乐不如众乐乐，众乐乐不如与人乐乐”。

是的

查看完整版本: 唱花儿的花儿