klxf 发表于 2025-5-27 21:51:28

演唱会

<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:48px;height:48px; top:16%; 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://bbs.cnzv.cc/data/attachment/common/c8/common_2_icon.jpg" 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-28 14:26:47

支持，赞
:handshake

醉美水芙蓉 发表于 2025-5-28 17:38:43

很牛的演唱会！

klxf 发表于 2025-5-28 19:59:59

明月工作室 发表于 2025-5-28 14:26
支持，赞

谢谢明月观赏与鼓励:)

klxf 发表于 2025-5-28 20:00:35

醉美水芙蓉 发表于 2025-5-28 17:38
很牛的演唱会！
呵呵，祝福节日快乐！哪天去看看？:)

changqinggongan 发表于 7 天前

不错不错 支持下

ijunu 发表于 昨天 01:24

支持发布，内容值得回味
页: [1]
查看完整版本: 演唱会