杨帆 发表于 2025-7-1 20:08

手心有你 - 学习马老师帖《元素能量之英雄主题》

本帖最后由 杨帆 于 2025-7-1 20:14 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>《手心有你》 - 白沐兮</title>
</head>
<body>
   <style>
    #papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://pic1.imgdb.cn/item/686298a958cb8da5c8803ce3.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative;   user-select: none; overflow: hidden;}
    #btnFs { right:20px; top:20px; color: cyan; border-color: cyan !important; }
    #player { position: absolute; left: 2%; top: 2%; width: 90px; height: 90px; animation: rot 8s linear infinite var(--state); --state: running; border-radius: 50%; transition: transform 0.3s ease; opacity: .8; z-index: 10; }
    #player:hover { transform: scale(1.05); filter: drop-shadow(0 0 80px Gold); }
    @keyframes rot { to { transform: rotate(360deg); } }
    #vid1 { position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .6; pointer-events: none; z-index: 1; }
    #vid2 { position: absolute; width: 80%; height: 80%; object-fit: cover; mask: radial-gradient(red 28%, transparent 30%,transparent); -webkit-mask: radial-gradient(red 28%, transparent 30%,transparentd); opacity: .4; mix-blend-mode: screen; pointer-events: none; z-index: 1; }
    #vid3 { position: absolute; left: 25%; top: 1%; width: 50%; height: 100%; object-fit: cover; opacity: .9; mix-blend-mode: screen; pointer-events: none; z-index: 1; }
    #lrc { --state: paused; --motion: cover2; --tt: 2s; --bg: linear-gradient(180deg, #880000, #ff0000, #80ef03); position: absolute; z-index: 5; left: 50%; transform: translate(-50%); top: 88%; font: normal 3.2em 华文新魏; color: #055306; white-space: pre; -webkit-background-clip: text; 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); z-index: 5; }
    #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; z-index: 5; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
    @keyframes cover1 { from { width: 0; } to { width: 100%; } }
    @keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
    <div id="papa">
      <div id="lrc" data-lrc="">手心有你</div>
      <audio id="aud" src="https://file.uhsea.com/2506/188ea64062790b53b94b69c345b5452cE3.mp3" autoplay loop></audio>
      <video id="vid1" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/14/51/00/video636364d43e50d.mp4" autoplay loop muted></video>
      <video id="vid2" src="https://video.699pic.com/videos/27/86/41/a_67407971346d417322786412164.mp4" autoplay loop muted></video>   
       <video id="vid3" src="https://file.uhsea.com/2408/1f19c2537940debf6133c067d1d3e9e9EX.mp4" autoplay loop muted></video>
      <img id="player" title="播放/暂停" src="https://638183.freep.cn/638183/t23/btn/uih.webp" alt="" />
    </div>
    <script type="module">
      import { THREE, scene, camera, renderer, clock, basic3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js?v=1.0';
      import TWEEN from 'https://638183.freep.cn/638183/3dev/examples/jsm/libs/tween.module.js';
      import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';
      basic3(papa, aud.paused);

      const geometry1 = new THREE.TorusGeometry(0.4, 0.2, 40, 40); // 几何体1
      geometry1.translate(-1, 0, 0); // 位置调整
      const geometry2 = new THREE.TorusGeometry(0.4, 0.2, 40, 40); // 几何体2(仅取其点数据)
      geometry2.translate(1, 0, 0); // 位置调整
      const pointsMaterial = new THREE.PointsMaterial({
            size: 0.05, // 尺寸
            color: 'cyan', // 颜色
            transparent: true, // 开启透明度
            opacity: 0.3 // 透明设置
      });
      const points = new THREE.Points(geometry1, pointsMaterial); // 用几何体1构图
      scene.add(points);

      const startPositions = geometry1.attributes.position; // tween动画起始位置数组
      const endPositions = geometry2.attributes.position; // tween动画终点位置数组
      const total = startPositions.count; // 点云的点数量
      // tween动画设计 : 点位置交换规则 →
      for (let i = 0; i < startPositions.count; i++) {
            if (i % 10 === 0) continue; // 跳过被10整除的点
            const tween = new TWEEN.Tween(startPositions.array)
               .to({
                  : endPositions.array[(total - i - 1) * 3],
                  : endPositions.array[(total - i - 1) * 3 + 1],
                  : endPositions.array[(total - i - 1) * 3 + 2]
                }, 5000 * Math.random() + 5000)
               .delay(2000)
               .easing(TWEEN.Easing.Exponential.Out)
               .onUpdate(() => startPositions.needsUpdate = true)
               .repeat(Infinity)
               .repeatDelay(1500)
               .yoyo(3000)
               .start();
      }

      const animate = () => {
            TWEEN.update();
            const delta = clock.getDelta();

            renderer.render(scene, camera);
            requestAnimationFrame(animate);
      };

      const tweens = TWEEN.getAll();

      player.onclick = () => {
            aud.paused ? aud.play() : aud.pause();
      };
      player.onmousemove = (e) => {
            player.title = '播放/暂停';
            player.style.cursor = 'pointer';
      };

      aud.onplaying = aud.onpause = () => {
            tweens.forEach(tween => aud.paused ? tween.pause() : tween.resume());
            aud.paused ? clock.stop() : clock.start();
      };

      animate();
      FS(papa, player);
    </script> <script>
      (function () {
            let script = document.createElement('script');
            script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
            document.head.appendChild(script);
            let mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused')) : (papa.style.setProperty('--state', 'running'));
            aud.addEventListener('play', mState, false);
            aud.addEventListener('pause', mState, false);
            aud.addEventListener('seeked', () => calcKey());
            player.onclick = () => aud.paused ? aud.play() : aud.pause();
      })();

      (function () {
            /*原始lrc歌词*/
            let lrcStr = `
手心有你

词曲：马健涛
编曲：马健涛
混音：马健涛
母带：马健涛
出品：执着文化

让我留在你身边多一天
让我爱你每天多一点
让我今生与你做伴
让我亲吻你的脸蛋
我在梦到你的夜里流泪
双手捧着你的相片
你是我放不下的人
我要把你捧在我手心
谢谢你一直的包容我
没有丢下我
谢谢你一直的爱着我
原谅我的过错
感谢上苍把你赐给我
温暖了我心窝
当我哭泣难过的时候
你会紧紧抱着我
让我留在你身边多一天
让我爱你每天多一点
让我今生与你做伴
让我亲吻你的脸蛋
我在梦到你的夜里流泪
双手捧着你的相片
你是我放不下的人
我要把你捧在我手心
谢谢你一直的包容我
没有丢下我
谢谢你一直的爱着我
原谅我的过错
感谢上苍把你赐给我
温暖了我心窝
当我哭泣难过的时候
你会紧紧抱着我
让我留在你身边多一天
让我爱你每天多一点
让我今生与你做伴
让我亲吻你的脸蛋
我在梦到你的夜里流泪
双手捧着你的相片
你是我放不下的人
我要把你捧在我手心
让我留在你身边多一天
让我爱你每天多一点
让我今生与你做伴
让我亲吻你的脸蛋
我在梦到你的夜里流泪
双手捧着你的相片
你是我放不下的人
我要把你捧在我手心
我要把你捧在我手心
`;

            /*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
            let mKey = 0, mFlag = true, averAdd = 0.3;

            /*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
            let lrcTime = (ar) => {
                let tmpAr = [];
                for (j = 0; j < ar.length - 1; j++) {
                  if (j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
                }
                let aver = parseInt(tmpAr.reduce((a, b) => a + b) / (tmpAr.length - 1)) + averAdd;
                tmpAr.push(aver);
                tmpAr.forEach((item, key) => {
                  ar = item > aver ? aver : item;
                });
                return ar;
            };

            /*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
            let getLrcAr = (text) => {
                let lrcAr = [];
                let calcRule = ;
                for (x of text.split('\n')) {
                  let ar = [];
                  let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                  let geci = x.replace(re, '');
                  if (geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g, '');
                        let time = x.match(re);
                        if (time != null) {
                            for (y of time) {
                              let tmp = y.match(/\d+/g);
                              let sec = 0;
                              for (z in tmp) sec += tmp * calcRule;
                              ar = ;
                              lrcAr.push(ar);
                            }
                        }
                  }
                }
                lrcAr.sort((a, b) => a - b);
                return (lrcTime(lrcAr));
            };

            /*函数 ：模拟显示同步歌词*/
            let showLrc = (time) => {
                let name = mFlag ? 'cover1' : 'cover2';
                lrc.innerHTML = lrcAr;
                lrc.dataset.lrc = lrcAr;
                lrc.style.setProperty('--motion', name);
                lrc.style.setProperty('--tt', time + 's');
                lrc.style.setProperty('--state', 'running');
                mKey += 1;
                mFlag = !mFlag;
            };

            /*函数 ：处理当前歌词索引 mKey*/
            let calcKey = () => {
                for (j = 0; j < lrcAr.length; j++) {
                  if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                  }
                }
                if (mKey < 0) mKey = 0;
                if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
                let time = lrcAr - (aud.currentTime - lrcAr);
                showLrc(time);
            };

            /*格式化时间信息*/
            let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                  sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
            }

            /*函数 ：关键帧动画状态切换*/
            let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), player.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state', 'running'), player.style.animationPlayState = 'running');

            /*监听播放进度*/
            aud.addEventListener('timeupdate', () => {
                for (j = 0; j < lrcAr.length; j++) {
                  if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                  }
                }
            });
            aud.addEventListener('pause', () => mState());/*监听暂停事件*/
            aud.addEventListener('play', () => mState());/*监听播放事件*/
            aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
            let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
      })();
    </script>
</body>
</html>

红影 发表于 2025-7-1 20:24

这个用法很好啊，把这效果弄到两个相爱的人中间，很像心灵的交融呢。运用得特别好。
欣赏杨帆好帖{:4_199:}

杨帆 发表于 2025-7-1 20:36

红影 发表于 2025-7-1 20:24
这个用法很好啊，把这效果弄到两个相爱的人中间，很像心灵的交融呢。运用得特别好。
欣赏杨帆好帖{:4_199: ...

谢谢影子鼓励，心灵交融，滋养灵魂，互相成就{:4_204:}

红影 发表于 2025-7-1 22:01

杨帆 发表于 2025-7-1 20:36
谢谢影子鼓励，心灵交融，滋养灵魂，互相成就

嗯嗯，这个效果特别好{:4_187:}

梦江南 发表于 2025-7-2 09:11

一个球就变成二个球了，还配上歌词，又加上了一个小红花播放器。太棒了！{:4_187:}

梦江南 发表于 2025-7-2 09:21

画面，歌词，很完美。欣赏点赞！{:4_199:}

杨帆 发表于 2025-7-2 11:52

梦江南 发表于 2025-7-2 09:21
画面，歌词，很完美。欣赏点赞！

问好江南朋友，谢谢鼓励，祝开心{:4_204:}
页: [1]
查看完整版本: 手心有你 - 学习马老师帖《元素能量之英雄主题》