本帖最后由 花简静 于 2025-8-15 10:39 编辑
<style>
#tz { margin: 30px 0; left: calc(50% - 101px); transform: translateX(-50%); width: clamp(600px, 90vw, 1800px); height: auto; aspect-ratio: 18/9; background: url('https://642303.freep.cn/642303/za/20250614xfzlbb05.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative;overflow: hidden; }
#btnFs { bottom: 20px; color: #eee; }
#tz > canvas { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; }
#vid {position: absolute; width: 100%; height: 130%;top:-100px;mix-blend-mode: overlay; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; opacity: .51; }
</style>
<div id="tz"><video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/08/29/17/22/02/video64edb8ba412ef.mp4" autoplay loop muted></video></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1953528261" autoplay loop></audio>
<script type="module">
import { THREE, scene, camera, renderer, clock, LZ } from 'https://638183.freep.cn/638183/web/ku/spriteparticle.js?v=1';
const config = {
sprite: {
number: 80,
color: 0X10FFFF,
scale: [0.2,0.2,0.3],
pic: 'https://642303.freep.cn/642303/za/fl1033.png',
rotation: [30, 30, 30]
},
mesh: {
pic: 'https://642303.freep.cn/642303/za/shuijing300%20%E6%8B%B7%E8%B4%9D.webp',
transparent: true,
position: [-0.8, -0.6, 0],
rotate: [0, 0, -Math.PI / 4],
rotation: [0.9, 0.9, 0]
}
};
LZ(tz, config);
new THREE.TextureLoader().load(
'https://642303.freep.cn/642303/za/xiaochuan.png',
(texture) => {
texture.colorSpace = THREE.SRGBColorSpace;
const girl = new THREE.Sprite(
new THREE.SpriteMaterial({ map: texture })
);
girl.position.set(-7.5, -2, 0);
girl.scale.set(1, 0.5, 1);
scene.add(girl);
}
);
</script>
| 
