亚伦影音工作室 发表于 2025-6-24 17:17

任夏 - 我再委屈也不敢哭

本帖最后由 亚伦影音工作室 于 2025-6-24 19:42 编辑 <br /><br /><style>
    #papa { margin: 30px -310px; width: 1286px;height: 720px;background: url(https://pic1.imgdb.cn/item/68537fb258cb8da5c85a91ce.jpg) no-repeat center/cover; box-shadow: 2px 2px 8px #000;overflow: hidden; z-index: 1; position: relative;}
    #btnFs { margin: 30px 90%; color: #ccc;width: 80px;font: normal 20px 'FZYaoti', sans-serif; }
    #player { position: absolute; left: -1000px; }
#tz { margin: 0px 0px; bottom: 10%;width:100%;left: 0%; height: 300px;position: absolute;z-index:10;}
#tz::before { content: attr(data-lrc); position: absolute; bottom: 0px;margin: 0px 20px;width: 100%; height: 60px; text-align: center; font: 600 3.5em/1em 'FZYaoti', sans-serif; color:#880000; filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;background-image: -webkit-linear-gradient(120deg,#ffff78,#fffac6 25%,#00ff00 50%,#fff 55%,#2cc4e0 60%,#8b2ce0 80%,#ff0000 95%,#000);
animation: flowCss 6s infinite linear ;
   -webkit-background-size: 200% 100%; }
   .stop #tz::before{animation-play-state: paused;}
   
@keyframes flowCss {
            0% {background-position: 0 0;}
          100% {background-position: -500% 0;}
      }

</style>

<div id="papa">
    <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/ae/6a/3d/04f006f193a3f8118074173bf8d28357/audio.mp3" autoplay loop></audio>
    <div id="player"></div>
<div id="testImg" ><div id="tz" data-lrc="任夏 - 我再委屈也不敢哭"></div></div>

</div>

<script type="module">
    import { THREE, scene, camera, renderer, clock, basic3, click3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';
    import { textcanvas } from 'https://638183.freep.cn/638183/3dev/3/textcanvas1.js';
    import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';

    basic3(papa);

    const group = new THREE.Group();
    group.position.set(0, 0, -2);
    const spriteTexture = new THREE.TextureLoader().load('https://pic1.imgdb.cn/item/685a1e8658cb8da5c869cbfd.png');
    spriteTexture.colorSpace = THREE.SRGBColorSpace;
    for (let i = 0; i < 100; i ++) {
      const sprite = new THREE.Sprite(new THREE.SpriteMaterial({ color: 0xeeeeee, map: spriteTexture }));
      sprite.position.set(
            THREE.MathUtils.randFloatSpread(10),
            THREE.MathUtils.randFloatSpread(6),
            THREE.MathUtils.randFloatSpread(10)
      );
      sprite.scale.set(0.5, 0.5, 2);
      sprite.material.rotation = Math.random() * Math. PI;
      group.add(sprite);
    }

    const setting = {
      font: `200 20px 'FZYaoti', sans-serif`,
      fill: true,
      fillColor: '#cccccc',
      bg: '#000',
      padding: { x: 5, y: 4},
      shadowX: 3,
      shadowY: 3
    };
    const canv = textcanvas('*任夏*我再委屈也不敢哭', setting);
    const texture = new THREE.CanvasTexture(canv);

    const mesh = new THREE.Mesh(
      new THREE.SphereGeometry(),
      new THREE.MeshBasicMaterial({ map: texture })
    );
    mesh.position.set(-3, 1, -4);

    scene.add(group, mesh);

    const animate = () => {
      requestAnimationFrame(animate);
      const delta = clock.getDelta();
      mesh.rotation.y -= delta;
      group.rotation.y -= delta / 10;
      renderer.render(scene, camera);
    };

    papa.onclick = (e) => {if (click3(mesh, e)) player.click()};

    papa.onmousemove = (e) => {
      papa.title = click3(mesh, e) ? '播放/暂停(Alt+X)' : '';
      papa.style.cursor = click3(mesh, e) ? 'pointer' : 'default';
    };

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

    animate();
    FS(papa, player);
</script>

<script >
var curkey = 0, lrcAr = [];
var getAr = (text) => {
    var ar = text.trim().split('\n');
    ar.sort();
    var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    ar.forEach(item => {
      let result = item.match(reg);
      let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
      lrcAr.push(.trim()]);
    });
};

aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
    if(curkey > lrcAr.length - 1) return;
    if(aud.currentTime >= lrcAr) {
      tz.dataset.lrc = lrcAr;
      curkey ++;
    }
};

var lrc = `任夏 - 我再委屈也不敢哭
我一个人哭过笑过
也有几次抱怨过生活
我一个人伤过痛过
在深夜里酩酊大醉过
你是否也爱过恨过
也曾后悔做错过选择
陌生的朋友我们都一样
在平凡日子里挣扎的活
我再委屈也不敢哭
因为没人为我撑腰
我再疲惫也不敢说
因为没人让我依靠
我再心痛也不喊疼
因为没人给我拥抱
这些年我经历太多太多
习惯了一个人熬
你是否也爱过恨过
也曾后悔做错过选择
陌生的朋友我们都一样
在平凡日子里挣扎的活
我再委屈也不敢哭
因为没人为我撑腰
我再疲惫也不敢说
因为没人让我依靠
我再心痛也不喊疼
因为没人给我拥抱
这些年我经历太多太多
习惯了一个人熬
我再委屈也不敢哭
因为没人为我撑腰
我再疲惫也不敢说
因为没人让我依靠
我再心痛也不喊疼
因为没人给我拥抱
这些年我经历太多太多
习惯了一个人熬
`;
getAr(lrc);


(function(){
var image = document.getElementById("testImg");


let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();


</script>

杨帆 发表于 2025-6-24 19:46

谢谢亚伦老师精彩分享{:4_191:}

红影 发表于 2025-6-24 20:52

这个文字贴图真好，非常特别的展现。
欣赏亚老师好帖{:4_199:}
页: [1]
查看完整版本: 任夏 - 我再委屈也不敢哭