杨帆 发表于 2025-8-13 15:46

《情罪 (live合唱版)》 - 学习马老师帖代码

本帖最后由 杨帆 于 2025-8-14 21:47 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>情罪 - 陈瑞</title>
</head>
<body>
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --ma-size: 12%; background: var(--bg); position: relative; --bg: url('https://upfile.mp3.wf/view.php/fef4e32d0c8ec8004a5c8d12aa36bd4c.jpg') no-repeat center/cover; --bg1:none; user-select: none;background-blend-mode: darken;}
#pa::before { content: ''; position: absolute; inset: 0; background: var(--bg1); mask: linear-gradient(var(--a), red var(--per), transparent calc(var(--per) + 2%), transparent); -webkit-mask:linear-gradient(var(--a), red var(--per), transparent calc(var(--per) + 2%), transparent); }
#ma { left: 1%; top: 1%; display: grid; place-items: center; opacity: 0;}
#ma:hover {transform: scale(1.1);}
#pa:hover #ma {opacity: .9;}
.son { position: absolute; width: 15%; height: 80%;}
.son::before, .son::after { position: absolute; content: ''; width: 100%; height: 100%; background: repeating-conic-gradient(LightGreen,transparent, cyan, BlueViolet,Gold 25%); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); transform: scale(1); }
.son:::before { transform: scale(-1); }
.son::after { top: 50%; left: 50%; width: 15px; height: 15px; border-radius: 50%; background: DarkOrange; transform: translate(-50%, -50%); z-index: 1; box-shadow: 0 0 2px Gold; }
.son:nth-of-type(2) { transform: rotate(90deg); }
.son:nth-of-type(3) { transform: rotate(45deg); }
.son:nth-of-type(4) { transform: rotate(135deg); }
#lrc { position: absolute; left:35%; bottom:5%; font: bold 2.8em STZhongsong; color: #fcedbb; text-shadow: 1px 1px 2px Gold; opacity: .9;}
#lrc::before { background: linear-gradient(45deg, Gold, GreenYellow);background-clip: text;}
#btnFs { right: 30px; top: 30px; font: bold 18px/1.5 Arial; color: #fff; }
#canvas { position: absolute; left: 5%;top: 100%; width:1250px; height:250px; transform:translateY(-53%); }
#aud { visibility: hidden; }
</style>
<div id="pa">
<audio id="aud" class="audio" src="https://aod.cos.tx.xmcdn.com/storages/491b-audiofreehighqps/CA/8C/GArMwRIKj7RbACAAAAL-87e9.m4a" autoplay loopcontrols crossOrigin="anonymous"></audio>
        <video class="pd-vid " src="https://img.tukuppt.com/video_show/3670683/00/02/09/5b508a5b45fa7.mp4" autoplay loop muted></video>
        <div id="ma" class="invert">
                <div class="son"></div>
                <div class="son"></div><div class="son"></div>
                <div class="son"></div>
        </div>
        <div id ="lrc"></div>
<canvas id="canvas" ></canvas> </div>
<script>
        var per = -2, step = 0.5, aniCounter = 0, raf;
        var pics = [
                'https://upfile.mp3.wf/view.php/8bab9e79b7b4e3c535aab12e496de759.jpg',
                'https://upfile.mp3.wf/view.php/77a6910625fd03f09e7e3a8ddcfc1377.jpg',
                'https://upfile.mp3.wf/view.php/a2108d158456ff493ee040efea6a403a.jpg',
                'https://upfile.mp3.wf/view.php/a9d136297705e1b0b5e51f0b0419a37a.webp',
                'https://upfile.mp3.wf/view.php/5f27c8ae59bc0ad2f8e147459da4f5b9.jpg',
                'https://upfile.mp3.wf/view.php/fef4e32d0c8ec8004a5c8d12aa36bd4c.jpg',
        ];
        ma.onanimationiteration = () => {
                var angle = aniCounter % 8, picIdx = aniCounter % pics.length;
               pa.style.setProperty('--a', Math.random() * 360 + 'deg');

                pa.style.setProperty('--bg1', `url(${pics}) no-repeat center/cover`);
                picIdx = (picIdx + 1) % pics.length;
                aniCounter ++;
                changePic();
        };
        function changePic() {
                if (per > 100) {
                        cancelAnimationFrame(raf);
                        per = -2;
                        var picIdx = aniCounter % pics.length;
                        picIdx = picIdx > 0 ? picIdx - 1: pics.length - 1;
                        pa.style.setProperty('--bg', `url(${pics}) no-repeat center/cover`);
                } else {
                        per += step;
                        pa.style.setProperty('--per', per + '%');
                        raf = requestAnimationFrame(changePic);
                }
        }
   ma.onmousemove = () => {
                ma.title = document ? '播放/暂停' : '';
                ma.style.cursor = document ? 'pointer' : 'default';
        }
</script>
<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';       
      import lrc from 'https://638183.freep.cn/638183/web/lrc/yslrc-only.js';
        var geci = `情罪 - 陈瑞
作词：高寒
作曲：高寒
演唱：陈瑞
编曲：薛云贻
和声：南妮
混音：乐艺文化
监制：陈瑞/飞翔
营销推广：何大为
出品：飞翔文化传媒
发行：漫吞吞文化
一个人跳着孤单的舞步
让寂寞就像流泪的红烛
任我心反反复复为谁而倾诉
端起孟婆汤心里无助
曾经欢乐有过无数
遗憾爱还是凄美的谢幕
我和你之间能有谁赢谁输
只有奈何桥分别一幕
谁是谁非谁错谁对
谁又是为谁犯下情罪
红尘再没有今生轮回
今世豪情又该为谁醉
谁是谁非谁错谁对
谁又是为谁犯下情罪
红尘再没有今生轮回
今世豪情又该为谁醉
谁是谁非谁错谁对
谁又是为谁犯下情罪
红尘再没有今生轮回
今世豪情又该为谁醉
谁是谁非谁错谁对
谁又是为谁犯下情罪
红尘再没有今生轮回
今世豪情又该为谁醉
今世豪情又该为谁醉

`;
        FS(pa, ma);
        lrc(pa, geci);
</script>
<script>
window.onload = function () {
      var oAudio = document.getElementById('aud');   
      var oCtx = new AudioContext();
      var audioSrc = oCtx.createMediaElementSource(oAudio);
      var analyser = oCtx.createAnalyser();
      audioSrc.connect(analyser);
      analyser.connect(oCtx.destination);
      var ctx = canvas.getContext('2d');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      var oW = canvas.width;
      var oH = canvas.height;
      var color1 = ctx.createLinearGradient(oW / 2, oH / 2- 2, oW / 2, oH / 2- 95);
      var color2 = ctx.createLinearGradient(oW / 2, oH / 2+2, oW / 2, oH / 2+95);
      color1.addColorStop(1, '#ffffff');
      color1.addColorStop(0, '#fff000');
      color1.addColorStop(0, '#00ff00');
      color2.addColorStop(0, '#ffffff');
      color2.addColorStop(0, '#fff000');
      color2.addColorStop(1, '#00ff00');
      var count = 90;
      var voiceHeight = new Uint8Array(analyser.frequencyBinCount);
      function draw() {
      analyser.getByteFrequencyData(voiceHeight);
      var step = Math.round(voiceHeight.length / count);
      ctx.clearRect(0, 0, oW, oH);
      for (var i = 0; i < count; i++) {
          var audioHeight = voiceHeight;
          ctx.fillStyle = color1;
          ctx.fillRect(oW / 2 + (i * 5), oH / 2, 2, -audioHeight);
          ctx.fillRect(oW / 2 - (i * 5), oH / 2, 2, -audioHeight);
          ctx.fillStyle = color2;
          ctx.fillRect(oW / 2 + (i * 0), oH / 2, 0, audioHeight);
          ctx.fillRect(oW / 2 - (i * 0), oH / 2, 0, audioHeight);
      }
      window.requestAnimationFrame(draw);
      }
      draw();
    }   
</script>
</body>
</html>

梦江南 发表于 2025-8-13 16:13

动作这么快啊！制作精彩，欣赏学习！{:4_187:}

杨帆 发表于 2025-8-13 16:29

梦江南 发表于 2025-8-13 16:13
动作这么快啊！制作精彩，欣赏学习！

问好江南，谢谢鼓励，祝开心{:4_204:}

红影 发表于 2025-8-13 20:38

漂亮的图片轮播，还有频谱和精美的小播设计。
又是很多效果的集合呢。欣赏杨帆好帖{:4_199:}

小辣椒 发表于 2025-8-13 21:42

欣赏杨帆精彩的制作{:4_199:}

杨帆 发表于 2025-8-13 23:08

红影 发表于 2025-8-13 20:38
漂亮的图片轮播，还有频谱和精美的小播设计。
又是很多效果的集合呢。欣赏杨帆好帖

谢谢影子鼓励，祝开心{:4_187:}

杨帆 发表于 2025-8-13 23:09

小辣椒 发表于 2025-8-13 21:42
欣赏杨帆精彩的制作

问好小辣椒，谢谢鼓励，祝开心{:4_204:}

红影 发表于 2025-8-14 21:18

杨帆 发表于 2025-8-13 23:08
谢谢影子鼓励，祝开心

不客气啊，问好杨帆，晚上好{:4_187:}
页: [1]
查看完整版本: 《情罪 (live合唱版)》 - 学习马老师帖代码