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

请马老师让美丽的小花歇歇脚吧，谢谢[已解决]

本帖最后由 杨帆 于 2025-6-14 13:09 编辑 <br /><br /><!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>爱在秋天的童话 - 江智民/周虹</title>
</head>

<body>
<style>
    #papa {
      --size: 15vw; 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://bbs.cnzv.cc/up/upload/pic/12/20250213-3dc8791fc55473d70185ddb9940c45ff.jpg') 0 0/100% 105%;
      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%;
    }
#bt {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0%;
      left: 0%;
      mix-blend-mode: screen;
      z-index: -1;
    }

    #bt img {
      width: 100%;
      height: 100%;
    }
    #papa>canvas {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      display: block;
    }

    #btnFs {
      left: 2%;
      bottom: 20px;
      color: #eee;
    }

    #pa {
      position: absolute;
      top: 82%;
      left: 90%;
      width: 10%;
      height: auto;
      aspect-ratio: 1/1;
      border-radius: 50%;
      opacity: 0;
      cursor: pointer;
      overflow: hidden;
      z-index: 10;
    }

    #papa:hover #pa {
      opacity: .8;
      filter: drop-shadow(0 0 80px Gold);
    }

    @keyframes rot {
      to {
      transform: rotate(360deg);
      }
    }

   .lrc {
      position: absolute;
      top: 22%;
      left: 30%;
      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-size: 35px;
      font-family: 华文行楷;
      transition: .3s all ease;
      list-style-type: none;
      text-align: center;
      display: block;
      padding: 0 10px;
      height: 50px;
      line-height: 50px;
      margin: 0 auto;
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
    }

   .lrc #ul li.active {
      transform: scale(1.2);
      color: #FFD700;
      font-weight: 650;
      text-shadow: 0 0 10px #EE1111;
    }

    #vid1 {
      width: 100%;
      height: 100%;
      z-index: 1;
      position: absolute;
      top: 0%;
      left: 0%;
      opacity: .8;
      object-fit: cover;
      pointer-events: none;
      mix-blend-mode: screen;
      mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);
      -webkit-mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);
    }

    #vid2 {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0%;
      left: 0%;
      object-fit: cover;
      z-index: 1;
      opacity: .8;
      pointer-events: none;
      mix-blend-mode: screen;
      mask: radial-gradient(transparent 15%, red);
      -webkit-mask: radial-gradient(transparent 15%, red);
    }

    #nhzer {
      color: #99ff00;
      position: absolute;
      left: 10%;
      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: 10%;
      }

      50% {
      opacity: 1;
      left: 50%;
      }

      100% {
      opacity: 0.8;
      left: 10%;
      }
    }

    #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="papa">
    <div id="nhzer"></div>
    <div id="dt">
      <img src="https://pic1.imgdb.cn/item/67564aedd0e0a243d4e015f5.gif" id="Img" style="mix-blend-mode: screen" alt=" " />
    </div>
<div id="bt">
      <img src="https://pic1.imgdb.cn/item/684b6ce058cb8da5c848da8b.gif" id="IMG" style="mix-blend-mode: screen" alt=" " />
    </div>
    <video id="vid1" src="https://video.699pic.com/videos/54/28/08/b_yTc2Yr2rUyeF1558542808_10s.mp4" loop muted autoplay=""></video>
    <video id="vid2" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/08/05/36/video6365a8d06c60e.mp4" loop muted autoplay=""></video>
    <div id="pa" title="播放/暂停"></div>
    <div id="dhgc" class="lrc">
      <ul id="ul"></ul>
    </div>
</div>
<audio id="audio" src="https://cccimg.com/view.php/3b2eee6fd7aa39f0fb4b07dc70f7e0b2.mp3" loop autoplay></audio>
<script type="importmap">
    {
      "imports": {
      "three": "https://638183.freep.cn/638183/3dev/build/three.module.min.js",
      "three/addons/": "https://638183.freep.cn/638183/3dev/examples/jsm/"
      }
    }
</script>
<script type="module">
    import * as THREE from 'three';
    import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
    import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
    import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';

    document.addEventListener('DOMContentLoaded', () => {
      const pa = document.getElementById('pa');
      const width = Math.max(pa.offsetWidth, 1);
      const height = Math.max(pa.offsetHeight, 1);

      var scene = new THREE.Scene();
      var clock = new THREE.Clock(true);
      var camera = new THREE.PerspectiveCamera(20, width / height, 0.1, 1000);
      camera.position.set(0, 0, 6);
      var renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha: true,
      preserveDrawingBuffer: true
      });

      renderer.setSize(width, height);
      pa.appendChild(renderer.domElement);

      var texture = new THREE.TextureLoader().load(
      'https://pic1.imgdb.cn/item/6843f9f158cb8da5c83904c5.png',
      (texture) => {
          texture.colorSpace = THREE.SRGBColorSpace;
          texture.wrapS = THREE.RepeatWrapping;
          texture.wrapT = THREE.RepeatWrapping;
          texture.repeat.set(1, 1);
      },
      undefined,
      (err) => console.error('Texture load error:', err)
      );

      const mesh = new THREE.Mesh(
      new THREE.BoxGeometry(1, 1, 1),
      new THREE.MeshBasicMaterial({ transparent: true, opacity: 0.8, color: 0xFFD700, map: texture })
      );
      scene.add(mesh);

      const composer = new EffectComposer(renderer);
      const renderPass = new RenderPass(scene, camera);
      composer.addPass(renderPass);

      const outlinePass = new OutlinePass(
      new THREE.Vector2(width, height),
      scene,
      camera
      );
      outlinePass.visibleEdgeColor.set(0xFFD700);
      outlinePass.edgeThickness = 1;
      outlinePass.edgeStrength = 5;
      outlinePass.selectedObjects = ;
      composer.addPass(outlinePass);

      let lastTime = 0;
      const animate = (now) => {
      requestAnimationFrame(animate);

      const delta = Math.min(clock.getDelta(), 0.1);
      mesh.rotation.x += delta / 5;
      mesh.rotation.y += delta / 5;

      if (clock.running) {
          outlinePass.pulsePeriod = 1;
          composer.render();
      }

      lastTime = now;
      };

      let resizeTimer;
      window.addEventListener('resize', () => {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(() => {
          const width = Math.max(pa.offsetWidth, 1);
          const height = Math.max(pa.offsetHeight, 1);

          camera.aspect = width / height;
          camera.updateProjectionMatrix();
          renderer.setSize(width, height);
          composer.setSize(width, height);
          outlinePass.setSize(width, height);
      }, 200);
      });

      pa.onclick = () => {
      clock.running ? clock.stop() : clock.start();
      const audio = document.getElementById('audio');
      const videos = document.querySelectorAll('video');
      const Img = document.getElementById('Img');
      const nhzer = document.getElementById('nhzer');
      const IMG= document.getElementById('IMG');

      if (audio.paused) {
          audio.play();
          videos.forEach(v => v.play());
          Img.style.opacity = '0.9';
          IMG.style.opacity = '0.9';
          nhzer.style.setProperty('--state', 'running');
      } else {
          audio.pause();
          videos.forEach(v => v.pause());
          Img.style.opacity = '0';
         IMG.style.opacity = '0';
          nhzer.style.setProperty('--state', 'paused');
      }
      };

      animate(0);
    });

</script>
<script>
    var lrc = `爱在秋天的童话 - 江智民/周虹
那是一个浪漫的秋天
我和你走进了童话的里面
轻轻的风吹过我窗前
一道美丽的彩虹挂在天边
那是一个难忘的秋天
我和你恋爱在童话的里面
袅袅的烟升向蓝天
一对美丽的鸳鸯戏水缠眠
我拉着你的手来到小河边
吻吻你的眼睛吻吻你的脸
掐掐你的鼻子掐掐你的肩
清清的小河边蓝蓝的天
我们天天相恋天天把手儿牵
青春已不见容颜已改变
童话里不变的你我的缠眠
童话里不变永远的笑脸
那是一个难忘的秋天
我和你恋爱在童话的里面
袅袅的烟 升向蓝天
一对美丽的鸳鸯戏水缠眠
我拉着你的手来到树林间
谈谈我们未来谈谈从前
讲讲我们故事讲讲体验
静静的树林间晴朗的天
我们天天相恋天天把手儿牵
光荫已不见岁月已走远
童话里不变的爱情的誓言
童话里不变爱你到永远
我拉着你的手来到树林间
谈谈我们未来谈谈从前
讲讲我们故事讲讲体验
静静的树林间晴朗的天
我们天天相恋天天把手儿牵
光荫已不见岁月已走远
童话里不变的爱情的誓言
童话里不变爱你到永远
`;

    let lrcArr = lrc.split('\n');
    let result = [];
    doms = {
      audio: document.querySelector("#audio"),
      ul: document.querySelector("#ul"),
      container: document.querySelector(".lrc")
    }

    for (let i = 0; i < lrcArr.length; i++) {
      let line = lrcArr.trim();
      if (!line) continue;

      let separatorIndex = line.indexOf(']');
      if (separatorIndex === -1) continue;

      let timePart = line.substring(1, separatorIndex);
      let lyric = line.substring(separatorIndex + 1) || '';

      result.push({
      time: parseTime(timePart),
      word: lyric.trim() || ' '
      });
    }

    function parseTime(lrcTime) {
      lrcTimeArr = lrcTime.split(":")
      return +lrcTimeArr * 60 + +lrcTimeArr;
    }

    function getIndex() {
      let Time = doms.audio.currentTime;
      for (let i = 0; i < result.length; i++) {
      if (result.time > Time) {
          return i - 1;
      }
      }
    }

    function createElements() {
      let frag = document.createDocumentFragment();
      for (let i = 0; i < result.length; i++) {
      let li = document.createElement("li");
      li.innerText = result.word;
      frag.appendChild(li);
      }
      doms.ul.appendChild(frag);
    }
    createElements();
    let containerHeight = doms.container.clientHeight;
    let liHeight = doms.ul.children.clientHeight;
    let minOffset = 0;
    let maxOffset = doms.ul.clientHeight - containerHeight;
    function setOffset() {
      let index = getIndex();
      let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
      if (offset < minOffset) {
      offset = minOffset;
      };
      if (offset > maxOffset) {
      offset = maxOffset;
      };
      doms.ul.style.transform = `translateY(-${offset}px)`;

      let li = doms.ul.querySelector(".active")
      if (li) {
      li.classList.remove("active");
      }

      li = doms.ul.children;
      if (li) {
      li.classList.add("active");
      }
    };

    doms.audio.addEventListener("timeupdate", setOffset);
    function createElements() {
      let frag = document.createDocumentFragment();
      for (let i = 0; i < result.length; i++) {
      let li = document.createElement("li");
      li.innerText = result.word || ' ';
      frag.appendChild(li);
      }
      doms.ul.appendChild(frag);
    }

    const audio = doms.audio;
    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 * as THREE from 'three';

    const papa = document.getElementById('papa');
    const width = papa.offsetWidth;
    const height = papa.offsetHeight;

    const scene = new THREE.Scene();
    const clock = new THREE.Clock(true);
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    camera.position.z = 5;

    const renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize(width, height);
    papa.appendChild(renderer.domElement);

    const config = {
      sprite: {
      number: 200,
      scale: 0.4,
      pic: 'https://638183.freep.cn/638183/small/hdxk.png',
      rotation:
      },
      mesh: {
      pic: 'https://638183.freep.cn/638183/small/2025/fl101.png',
      color: 0x00ffee,
      transparent: true,
      position: ,
      rotate: ,
      rotation:
      }
    };

    const spriteTexture = new THREE.TextureLoader().load(config.sprite.pic);
    const spriteGroup = new THREE.Group();
    for (let i = 0; i < config.sprite.number; i++) {
      const sprite = new THREE.Sprite(
      new THREE.SpriteMaterial({ map: spriteTexture })
      );
      sprite.scale.set(config.sprite.scale, config.sprite.scale, config.sprite.scale);
      sprite.position.set(
      (Math.random() - 0.5) * width,
      (Math.random() - 0.5) * height,
      Math.random() * 10 - 5
      );
      spriteGroup.add(sprite);
    }
    scene.add(spriteGroup);

    const meshTexture = new THREE.TextureLoader().load(config.mesh.pic);
    const meshMaterial = new THREE.MeshBasicMaterial({
      color: config.mesh.color,
      map: meshTexture,
      transparent: config.mesh.transparent
    });
    const meshGeometry = new THREE.PlaneGeometry(2, 2);
    const mesh = new THREE.Mesh(meshGeometry, meshMaterial);
    mesh.position.set(...config.mesh.position);
    mesh.rotation.set(...config.mesh.rotate);
    scene.add(mesh);

    const texture2 = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/hxxb.webp');

    const group = new THREE.Group();
    for (let i = 0; i < 300; i++) {
      const sprite = new THREE.Sprite(
      new THREE.SpriteMaterial({ color: Math.random() * 0xff0000, map: texture2 })
      );
      sprite.scale.set(0.5, 0.5, 0.5);
      sprite.position.set(100 * (Math.random() - 0.5), Math.random() * 20 - 10, Math.random() * 10 - 5);
      group.add(sprite);
    }
    scene.add(group);

    const animate = () => {
      requestAnimationFrame(animate);

      const delta = clock.getDelta();

      spriteGroup.children.forEach(sprite => {
      sprite.position.y -= delta;
      if (sprite.position.y < -height / 2) {
          sprite.position.y = height / 2;
          sprite.position.x = (Math.random() - 0.5) * width;
      }
      sprite.rotation.z += delta * config.sprite.rotation;
      });


      mesh.rotation.x += delta * config.mesh.rotation;
      mesh.rotation.y += delta * config.mesh.rotation;
      mesh.rotation.z += delta * config.mesh.rotation;

      group.children.forEach(sprite => {
      sprite.position.x += delta / 10;
      sprite.position.y -= delta;
      sprite.material.rotation -= delta;
      if (sprite.position.y < -10) {
          sprite.position.set(Math.random() * 10 - 6, Math.random() * 10 + 10, Math.random() * 10 - 5);
          sprite.material.color.set(Math.random() * 0xff0000);
      }
      });

      renderer.render(scene, camera);
    };

    window.onresize = () => {
      const width = papa.offsetWidth;
      const height = papa.offsetHeight;
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
      renderer.setSize(width, height);
    };

    animate();

</script>
</body>

</html>

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

发在论坛，歌词咋也不显示了，晕~

梦江南 发表于 2025-6-13 13:26

欣赏佳作，好大的花朵！{:4_199:}

红影 发表于 2025-6-13 17:43

好像另外加了播放器？跟在后面看看是如何解决的{:4_204:}

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

梦江南 发表于 2025-6-13 13:26
欣赏佳作，好大的花朵！

是，挺好玩，等马老师控制精灵粒子

杨帆 发表于 2025-6-13 18:42

红影 发表于 2025-6-13 17:43
好像另外加了播放器？跟在后面看看是如何解决的

是的，挺好玩，但不清楚在一个帖子内可否搭建多个场景

如可行，该如何处理二者的关系，请马老师抽空解答呢

红影 发表于 2025-6-13 19:48

杨帆 发表于 2025-6-13 18:42
是的，挺好玩，但不清楚在一个帖子内可否搭建多个场景

如可行，该如何处理二者的关系，请马老师抽空解 ...

我也不知道能不能行，我跟在后面一起看答案{:4_173:}
页: [1]
查看完整版本: 请马老师让美丽的小花歇歇脚吧，谢谢[已解决]