杨帆 发表于 2025-6-14 13:07

爱在秋天的童话


<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; user-select: none;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: 42%; left: 5%; 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: .98; 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: .98; 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(false);
      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) => {
      if (clock.running) {
          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);
      });

      const audio = document.getElementById('audio');
      pa.onclick = () => {
      if (audio.paused) {
          audio.play();
          clock.start();
          animate(0);
      } else {
          audio.pause();
          clock.stop();
      }
      const videos = document.querySelectorAll('video');
      const Img = document.getElementById('Img');
      const nhzer = document.getElementById('nhzer');
      const IMG = document.getElementById('IMG');

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

      audio.addEventListener('play', () => {
      clock.start();
      animate(0);
      });

      audio.addEventListener('pause', () => {
      clock.stop();
      });

      audio.addEventListener('ended', () => {
      clock.stop();
      });
    });

</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 'https://638183.freep.cn/638183/3dev/build/three.module.min.js';

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

    const scene = new THREE.Scene();
    const clock = new THREE.Clock(false);
    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: {},
      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 texture1 = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/hxxb.webp');

    const group = new THREE.Group();
    for (let i = 0; i < 100; i++) {
      const sprite = new THREE.Sprite(
      new THREE.SpriteMaterial({ color: Math.random() * 0xff0000, map: texture1 })
      );

      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 = () => {
      if (clock.running) {
      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);
    };

    const audio = document.getElementById('audio');
    audio.addEventListener('play', () => {
      clock.start();
      animate();
    });

    audio.addEventListener('pause', () => {
      clock.stop();
    });

    audio.addEventListener('ended', () => {
      clock.stop();
    });
</script>

红影 发表于 2025-6-14 14:26

恭喜杨帆歌词能出来了，而且点击暂停可以一键全控了。
欣赏杨帆好帖{:4_199:}

红影 发表于 2025-6-14 14:27

这些花朵都在歌词前面的呢{:4_204:}

杨帆 发表于 2025-6-14 14:31

红影 发表于 2025-6-14 14:26
恭喜杨帆歌词能出来了，而且点击暂停可以一键全控了。
欣赏杨帆好帖

呵呵，鼓捣着玩呢，谢谢影子鼓励{:4_187:}

梦江南 发表于 2025-6-14 14:49

厉害哦，歌词终于出来了！{:4_187:}

杨帆 发表于 2025-6-14 15:12

梦江南 发表于 2025-6-14 14:49
厉害哦，歌词终于出来了！

谢谢江南鼓励，鼓捣着就出来了，不知其因{:4_190:}

红影 发表于 2025-6-14 15:48

杨帆 发表于 2025-6-14 14:31
呵呵，鼓捣着玩呢，谢谢影子鼓励

非常好啊，杨帆的学习很用心，向你学习{:4_187:}

杨帆 发表于 2025-6-14 16:07

红影 发表于 2025-6-14 15:48
非常好啊，杨帆的学习很用心，向你学习

谢谢影子鼓励，一起学习，享受过程，共同进步{:4_204:}

樵歌 发表于 2025-6-14 20:30

做得相当好，很漂亮呢。

红影 发表于 2025-6-14 20:31

杨帆 发表于 2025-6-14 16:07
谢谢影子鼓励，一起学习，享受过程，共同进步

嗯嗯，一起享受学习的乐趣{:4_187:}

杨帆 发表于 2025-6-14 22:10

樵歌 发表于 2025-6-14 20:30
做得相当好，很漂亮呢。

谢谢樵歌管理员鼓励，顺祝节日快乐{:4_191:}
页: [1]
查看完整版本: 爱在秋天的童话