已经到了不能生气的年纪 - 学习马老师帖 - basic3文档 - 欢乐水吧 - 花潮论坛

杨帆发表于 2025-6-17 22:54

已经到了不能生气的年纪 - 学习马老师帖 - basic3文档

本帖最后由杨帆于 2025-6-18 00:37 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>已经到了不能生气的年纪（Live 合唱版）</title>
</head>
<body>
<style>
#tz { --state: running;margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh;aspect-ratio: 16/9; background: #333 url('https://pic1.imgdb.cn/item/6805ade358cb8da5c8ba9e03.webp') 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; }
#player { position: absolute; width: 240px; height: 240px; cursor: pointer; background: none; }
#btnFs { color: #eee; text-align: center; z-index: 10; }
#btnFs:hover { color: red; }
#vid { position: absolute; top: -1%; width: 100%; height: 120%; object-fit: cover; mask: linear-gradient(to right bottom, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 0) 80%); -webkit-mask: linear-gradient(to right bottom,rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 0) 80%); pointer-events: none; }
#lrc { left: 10%; top: 75%; }
#lrcc { left: 90%; transform: translate(-102%); top: 85%; }
#lrc, #lrcc { --state: paused; --motion: cover2; --tt: 2s; --bg: linear-gradient(89deg, #EE0000 12%, #078504 35%, #060344 65%, #DE0000 90%); border: 0px solid black; position: absolute; z-index: 6; font: normal 3.2em 华文新魏; color: #222222; 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: 15; }
#lrcc::before, #lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); clip-path: inset(0% 100% 0 0); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { to { clip-path: inset(0 0% 0 0); } }
@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
#Img { position: absolute; mix-blend-mode: darken; width: 150%; height: 150%; left: 30%; top: 1%; background: none; z-index: -1; }
#nhzer { color: #99ff00; position: absolute; left: 15%; 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 { 0% { opacity: 0.8; left: 15%; } 50% { opacity: 1; left: 50%; } 100% { opacity: 0.8; left: 15%; } }
#nhzer span { transition: color 0.3s ease, text-shadow 0.3s ease; text-shadow: 0 0 5px rgba(0, 255, 255, 0.5); }
</style>
<div id="tz">
   <audio id="aud" src="https://cccimg.com/view.php/ea244683baa6b7b60c354b6e1bc742ec.mp3" autoplay loop></audio>
   <video id="vid" src="https://cccimg.com/view.php/5b0950946ac02b933e9b39664cb3ec47.mp4" autoplay loop muted></video>
   <div id="player" title="播放/暂停"></div>
   <div id="lrc" data-lrc=""></div>
   <div id="lrcc" data-lrc=""></div>
   <img id="Img" src="https://cccimg.com/view.php/cd45d90af69ff09386f4c19dfb3650c0.gif" alt="" style="width: 605px; height: 334px;">
   <div id="nhzer"></div>
   <span id="btnFs"></span>
</div>
<script type="module">
   import { THREE, scene, camera, renderer, clock, basic3, click3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';

   basic3(tz);

   var group = new THREE.Group(), angle = 0;
   var texture = new THREE.TextureLoader().load('https://pic1.imgdb.cn/item/67dea95288c538a9b5c35131.gif');
   var icosahedron = new THREE.Mesh(
         new THREE.IcosahedronGeometry(2.4),
         new THREE.MeshNormalMaterial()
   );

   icosahedron.position.set(0, 4.5, 0);

   for (var i = 0; i < 160; i++) {
         var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ map: texture }));
         sprite.scale.set(1, 1, 0.5);
         sprite.position.set(
            THREE.MathUtils.randFloatSpread(20),
            THREE.MathUtils.randFloatSpread(20),
            THREE.MathUtils.randFloatSpread(25)
         );
         group.add(sprite);
   }
   scene.add(icosahedron, group);

   var isPlaying = true;

   var animate = () => {
         if (isPlaying) {
            requestAnimationFrame(animate);
            var delta = clock.getDelta();
            angle = (angle + delta / 5) % 360;
            camera.position.x = 20 * Math.sin(angle);
            camera.position.z = 20 * Math.cos(angle);
            group.children.forEach(sprite => sprite.material.rotation -= delta * 2);
            camera.lookAt(0, 0, 0);
            renderer.render(scene, camera);
         }
   };

   animate();

   tz.onclick = (e) => {
         if (click3(icosahedron, e)) {
            if (isPlaying) {
               aud.pause();
               isPlaying = false;
               vid.pause();
               Img.style.display = 'none';
            } else {
               aud.play();
               isPlaying = true;
               animate();
               vid.play();
               Img.style.display = '';
            }
         }
   };

   tz.onmousemove = (e) => {
         tz.title = click3(icosahedron, e) ? '播放/暂停' : '';
         tz.style.cursor = click3(icosahedron, e) ? 'pointer' : 'default';
   };

   aud.onplaying = aud.onpause = () => aud.paused ? clock.stop() : clock.start();
</script>

<span id="lrcStr" style="visibility: hidden;">
   已经到了不能生气的年纪（Live 合唱版）
作词：小酒
作曲：王帅
编曲：季文钊
吉他：陈嘉伟
和声：李芮芮
混音：浓汤宝
制作人：王帅
你可以偶尔崩溃哭泣
但不能丧失自愈的能力
你可以拥有一段糟糕的经历
但不能过颓废人生放纵自己
别活在别人的认知里
别在意别人怎么议论你
健康才是第一快乐才是目的
别让愤怒的荆棘缠绕着自己
已经到了不能生气的年纪
和谁在一起高兴就和谁在一起
哪怕自己在家喝粥我也愿意
也不愿看人脸色吃满汉全席
已经到了不能生气的年纪
和谎话连篇的人就不要再联系
把心情和脾气调成静音模式
然后不动声色的打理好自己
别活在别人的认知里
别在意别人怎么议论你
健康才是第一快乐才是目的
别让愤怒的荆棘缠绕着自己
已经到了不能生气的年纪
和谁在一起高兴就和谁在一起
哪怕自己在家喝粥我也愿意
也不愿看人脸色吃满汉全席
已经到了不能生气的年纪
和谎话连篇的人就不要再联系
把心情和脾气调成静音模式
然后不动声色的打理好自己
已经到了不能生气的年纪
和谁在一起高兴就和谁在一起
哪怕自己在家喝粥我也愿意
也不愿看人脸色吃满汉全席
已经到了不能生气的年纪
和谎话连篇的人就不要再联系
把心情和脾气调成静音模式
然后不动声色的打理好自己

</span>
<script>
   (function () {
         /*变量：mKey - 当前歌词索引；averAdd ：平均值补偿*/
         let mKey = 0, 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 arr = "";
            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) => {
            lrca = lrcAr;
            lrcAr.length == mKey + 1 ? lrcb = "" : lrcb = lrcAr;//判断最后一句歌词
            let Y = String(mKey / 2).indexOf(".");
            if (Y == -1) {
               0 == mKey && (lrc.innerHTML = lrca);
               lrc.dataset.lrc = lrca;
               lrcc.innerHTML = lrcb;
               lrcc.dataset.lrc = "";
               lrc.style.setProperty('--motion', 'cover1');
               lrc.style.setProperty('--tt', time + 's');
               lrc.style.setProperty('--state', 'running');
               lrcc.style.setProperty('--motion', 'cover2');
            } else {
               lrc.innerHTML = lrcb;
               lrcc.dataset.lrc = lrca;
               lrc.dataset.lrc = "";
               lrcc.style.setProperty('--motion', 'cover1');
               lrcc.style.setProperty('--tt', time + 's');
               lrcc.style.setProperty('--state', 'running');
               lrc.style.setProperty('--motion', 'cover2');
            }
            mKey += 1;
         };
         /*函数：处理当前歌词索引 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 mState = () => aud.paused ? (lrc.style.setProperty("--state", "paused"), lrcc.style.setProperty("--state", "paused")) : (lrc.style.setProperty("--state", "running"), lrcc.style.setProperty("--state", "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.innerHTML); /*获得歌词数组*/
   })();

   var mState = () => {
         player.style.setProperty('--state', aud.paused ? 'paused' : 'running');

   };

   aud.oncanplay = aud.onplaying = aud.onpause = () => mState();

   const audio = document.getElementById('aud');
   const nhzer = document.getElementById('nhzer');
   const message = "已经到了不能生气的年纪";
   const flashSpeed = 150;
   const baseColor = "#00ffff";
   const highlightColor = "#00ff00";
   let currentIndex = 0;
   let flashingTimer = null;
   const textSpans = [];

   function initNeonText() {
         nhzer.innerHTML = '';
         textSpans.length = 0;
         message.split('').forEach((char) => {
            const span = document.createElement('span');
            span.textContent = char;
            span.style.color = baseColor;
            textSpans.push(span);
            nhzer.appendChild(span);
         });
   }

   function animateNeon() {
         textSpans.forEach(span => {
            span.style.color = baseColor;
            span.style.textShadow = `0 0 5px rgba(0, 255, 255, 0.5)`;
         });

         if (textSpans) {
            textSpans.style.color = highlightColor;
            textSpans.style.textShadow = `
            0 0 10px ${highlightColor},
            0 0 20px ${highlightColor},
            0 0 30px ${highlightColor}
         `;
         }

         currentIndex = (currentIndex + 1) % textSpans.length;
   }

   audio.addEventListener('play', () => {
         if (!flashingTimer) {
            currentIndex = 0;
            animateNeon();
            flashingTimer = setInterval(animateNeon, flashSpeed);
            nhzer.style.setProperty('--state', 'running');
         }
   });

   audio.addEventListener('pause', () => {
         if (flashingTimer) {
            clearInterval(flashingTimer);
            flashingTimer = null;
         }
         textSpans.forEach(span => {
            span.style.color = baseColor;
            span.style.textShadow = `0 0 5px rgba(0, 255, 255, 0.5)`;
         });
         nhzer.style.setProperty('--state', 'paused');
   });

   audio.addEventListener('ended', () => {
         if (flashingTimer) {
            clearInterval(flashingTimer);
            flashingTimer = null;
         }
         currentIndex = 0;
         textSpans.forEach(span => {
            span.style.color = baseColor;
            span.style.textShadow = `0 0 5px rgba(0, 255, 255, 0.5)`;
         });
         nhzer.style.setProperty('--state', 'paused');
   });

   initNeonText();
</script>
<script type="module">
import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
qp.fs('tz','btnFs');
</script>
</body>
</html>

梦江南 发表于 2025-6-18 08:42

杨帆老师厉害，做得太棒了！{:4_187:}

梦江南 发表于 2025-6-18 08:49

还能一健全停呢！{:4_178:}

杨帆发表于 2025-6-18 11:23

梦江南发表于 2025-6-18 08:42
杨帆老师厉害，做得太棒了！

谢谢江南鼓励，还是你制作的视频厉害，马老师的代码厉害{:4_190:}

红影发表于 2025-6-18 11:25

这歌曲有意思，很有道理，到了一定年纪根本就不要再看别人脸色，活好自己的才是最重要的{:4_199:}

红影发表于 2025-6-18 11:27

这个精灵贴图好看，还带歌词同步的。
欣赏杨帆好帖{:4_199:}

樵歌发表于 2025-6-18 19:44

这音画贴制作得非常好，带和声的音乐是最好听的！{:4_171:}{:4_208:}

杨帆发表于 2025-6-18 22:35

樵歌发表于 2025-6-18 19:44
这音画贴制作得非常好，带和声的音乐是最好听的！

谢谢樵歌管理员鼓励，祝开心{:4_191:}

页: [1]

花潮论坛's Archiver

已经到了不能生气的年纪 - 学习马老师帖 - basic3文档