论坛 › 欢乐水吧 › 《演唱会》 - 学习马老师《夜魅》帖代码

杨帆 发表于 2025-5-27 21:18

《演唱会》 - 学习马老师《夜魅》帖代码

本帖最后由 杨帆 于 2025-5-27 21:41 编辑 <br /><br /><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: url('https://cccimg.com/view.php/607523b708cf3b20c7b2d0c487074cb7.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative;overflow: hidden;z-index:1;
}
      #btnFs { bottom: 20px; color: #eee; text-align: center; }
      #btnFs:hover { color: red; }
      #vid {position: absolute; width: 100%; height: 160%;top:-45%;object-fit: cover;mix-blend-mode: screen; -webkit-mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);pointer-events: none; }
      #player { position: absolute; width: 13%; height: 20%;left:46.5%; bottom: 51%; cursor: pointer; z-index:1;}
   #dt{
      position:absolute;
      width: 100%;
      height: 40%;
      top:60%;
      left: 0%;
      mix-blend-mode: screen;
      pointer-events: none;
      z-index: 1;
}
#dt img{width: 100%;
      height: 100%;
    }
.dancer{ position: absolute; width:80px;height:48px; top:18%; z-index:1;}
.tit{
   position: absolute;
   object-fit: cover;
   z-index:2;
   top:30px;
   width: 120%;
   left: 55%;
   background-image:url('https://z3.ax1x.com/2021/09/13/4PAYtI.gif');
   background-size:cover;
   filter: alpha(opacity=100,finishiopacity=0,style=1) shadow(color=#8C96B5,direction=135) glow(color=#B4BBCF,strength=5);   
   font: bold 2.8em 华文行楷;
   font-weight:666;
   text-align:left;
   line-height:85px;
   color:transparent;
   pointer-events: auto;   
   -webkit-background-clip:text;
}
#marquee{
        height: 150px;
        overflow: hidden;
}
#marquee > div {
    text-align: center;
    animation: marquee 12s linear infinite var(--state);
}
#marquee:hover>div{
        animation-play-state:paused;
}
#marquee p{
        height: 30px;
        margin: 0;
}
@keyframes marquee {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
}
.countdown-container {
      position: absolute;
      width: 1200px;
      height:220px;
      overflow: hidden;
      text-align: center;
      background-color: transparent;
      padding:50px;
      top:25%;   
      }

       .countdown-title {
            font:600 5.1em/1em 华文隶书;
            color: rgba(255,20,147, .98);
            margin-bottom: 20px;
      }

       .countdown-timer {
            font:500 4.5em/1em 华文行楷;
            color: rgba(255,215,0, .99);
            margin-bottom: 20px;
      }
</style>
<div id="tz">
      <audio id="aud" src="https://cccimg.com/view.php/96b0b2dabe6952b754f50387486fa0f5.mp3" autoplay loop></audio>
      <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/30/02/62aeebc173a62.mp4" autoplay loop muted></video>
      <div id="player" title="播放/暂停"><img src="https://bbs.cnzv.cc/up/upload/pic/12/20250123-5c9f2491918fe9fc73466d22e0e9a404.gif" style="width: 120px; height: 120px;" id="img" alt="">   </div>
<div id="dt">
<img src="https://cccimg.com/view.php/7dedb9e000fd4291a27e6557f3b41c9a.gif" id="IMG" / ></div>
<div id="marquee" >
<div class="tit">
<img class="dancer"src="https://www.huachaowang.com/static/image/common/logo_huachao.gif" alt="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;★端午节即将来临，祝福论坛各位朋友身体健康，家庭幸福，端午安康！<br></div></div></div>
<script type="module">
      import * as THREE from 'https://638183.freep.cn/638183/web/ku/three.module.min.js';
      import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';

      var scene = new THREE.Scene();
      var clock = new THREE.Clock();
      var camera = new THREE.PerspectiveCamera(88,tz.offsetWidth / tz.offsetHeight, 0.3, 1000);
      camera.position.set(-0.05, -3, 5);
      var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setSize(tz.offsetWidth, tz.offsetHeight);
      renderer.shadowMap.enabled = true;
      renderer.shadowMap.type = THREE.PCFSoftShadowMap;
      tz.appendChild(renderer.domElement);

      var geometry = new THREE.SphereGeometry();
      var material = new THREE.MeshStandardMaterial({color:0xFFD700,wireframe:true,transparent: true, opacity: 0.2, side: THREE.DoubleSide, receiveShadow: true
      });
      var mesh = new THREE.Mesh(geometry, material);
      mesh.castShadow = true;

      var planeGeometry = new THREE.PlaneGeometry(20, 20);
      const planeMaterial = new THREE.ShadowMaterial({color: 0x88ccff, opacity: 0.3
});

      var plane = new THREE.Mesh(planeGeometry, planeMaterial);
      plane.receiveShadow = true;

      var ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
      var directionalLight = new THREE.DirectionalLight(0xFFD700);


      directionalLight.position.set(-230, 150, 20);
      directionalLight.castShadow = true;
      scene.add(mesh, plane, directionalLight);

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

      window.onresize = () => {
                camera.aspect = tz.offsetWidth / tz.offsetHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(tz.offsetWidth, tz.offsetHeight);
      }

const marquee = document.getElementById('marquee');
const contents =marquee.innerHTML;
marquee.innerHTML = contents + contents;

(function() {
      var mState = () => {
IMG.style.setProperty('opacity', aud.paused ? '0' : '.9');
      };
   aud.oncanplay =aud.onplaying = aud.onpause = () => mState();
      })();   
tz.onclick = () =>aud.paused ? clock.stop() : clock.start();      
      animate();
      FS(tz, player);
</script>

红影 发表于 2025-5-27 21:51

这个把球效果做成了演唱会的灯球，也很漂亮呢。{:4_187:}
不过这个看不出阴影了呢。这个背景图图还是.珏的摄影作品吧。

红影 发表于 2025-5-27 21:52

视频选用很奇妙，滚动字还能鼠标触动暂停呢。
感谢杨帆的美好祝福，也祝你端午快乐{:4_199:}

杨帆 发表于 2025-5-27 22:29

本帖最后由 杨帆 于 2025-5-28 08:19 编辑

红影 发表于 2025-5-27 21:51
这个把球效果做成了演唱会的灯球，也很漂亮呢。
不过这个看不出阴影了呢。这个背景图图还是.珏的 ...
球右侧向右下方的投影就是阴影效果哇

谢谢.珏的摄影作品，谢谢影子观赏、雅评与鼓励{:4_187:}

梦江南 发表于 2025-5-28 07:52

欣赏杨帆精彩的音画，谢谢美好的祝福！祝端午安康！{:4_199:}

杨帆 发表于 2025-5-28 08:09

梦江南 发表于 2025-5-28 07:52
欣赏杨帆精彩的音画，谢谢美好的祝福！祝端午安康！

谢谢江南观赏与鼓励，端午安康{:4_204:}

梦油 发表于 2025-5-28 11:03

谢谢杨帆朋友的美好祝福。
祝杨帆朋友及家人幸福安康！

杨帆 发表于 2025-5-28 15:47

梦油 发表于 2025-5-28 11:03
谢谢杨帆朋友的美好祝福。
祝杨帆朋友及家人幸福安康！

谢谢梦油超版观赏与祝福，同祝朋友及家人幸福安康！{:4_191:}

梦油 发表于 2025-5-28 17:00

杨帆 发表于 2025-5-28 15:47
谢谢梦油超版观赏与祝福，同祝朋友及家人幸福安康！

杨帆朋友别客气。

红影 发表于 2025-5-28 21:14

杨帆 发表于 2025-5-27 22:29
球右侧向右下方的投影就是阴影效果哇

谢谢.珏的摄影作品，谢谢影子观赏、雅评与鼓励

这个阴影还真看不出什么效果呢{:4_173:}

杨帆 发表于 2025-5-28 21:57

本帖最后由 杨帆 于 2025-5-28 22:52 编辑 <br /><br />红影 发表于 2025-5-28 21:14
这个阴影还真看不出什么效果呢
很长的投射阴影呀，没看到？<br><br>


<img src="https://cccimg.com/view.php/a7cb557f78a4c5ef3d778d4b3e6e79ca.png" alt="" style="left: 0px; top:100px;width: 500px; height: 300px; ">

红影 发表于 2025-5-29 10:20

杨帆 发表于 2025-5-28 21:57
本帖最后由 杨帆 于 2025-5-28 22:52 编辑
很长的投射阴影呀，没看到？

原来是这个，我弄错了，还以为是灯光{:4_173:}
这个漂亮{:4_199:}

杨帆 发表于 2025-5-29 11:17

红影 发表于 2025-5-29 10:20
原来是这个，我弄错了，还以为是灯光
这个漂亮

鼓捣着玩呢。动态的，模拟灯光效果{:4_204:}

红影 发表于 2025-5-29 15:52

杨帆 发表于 2025-5-29 11:17
鼓捣着玩呢。动态的，模拟灯光效果

它和灯光还是有不同的，有自己的网格线的痕迹在，很奇妙{:4_187:}

杨帆 发表于 2025-5-29 19:02

本帖最后由 杨帆 于 2025-5-29 19:08 编辑

红影 发表于 2025-5-29 15:52
它和灯光还是有不同的，有自己的网格线的痕迹在，很奇妙
是的，可理解为灯光投射的效果{:4_187:}

红影 发表于 2025-5-29 21:33

杨帆 发表于 2025-5-29 19:02
是的，可理解为灯光投射的效果

这么长的阴影，厉害{:4_187:}

查看完整版本: 《演唱会》 - 学习马老师《夜魅》帖代码