小辣椒 发表于 2025-5-12 22:03

欣赏小提琴演奏


<style>
        #tz { --state: running; margin: 130px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh; aspect-ratio: 16/9; background: url('https://wj.zp68.com/lxx/yunhua/20211117/01.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; position: relative; }
        #player { position: absolute; left: 70%;bottom: 50px;z-index: 10; clip-path: circle(45%); transition: filter .7s; cursor: pointer; animation: rot 8s infinite linear var(--state); opacity: .45; }
        #player:hover { filter: invert(0.8); }
        #btnFs { left: 47%; bottom: 20px; color: #eee; text-align: center; }
        #btnFs:hover { color: Red; }
        #vid {position: absolute; width: 100%; height: 100%; bottom: 0; opacity: .8; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="tz">
        <audio id="aud" src="https://wj1.zp68.com:812/lxx/yunhua/20211117/05.mp3" autoplay loop></audio>
        <video id="vid" src="https://video-qn.51miz.com/preview/video/00/00/13/79/V-137992-59E8E7DE.mp4" autoplay loop muted></video>
        <img id="player" src="https://wj.zp68.com/lxx/yunhua/20211117/an.webp" width="10%" title="播放/暂停" />
</div>

<script type="module">

import * as THREE from 'https://esm.sh/three';
import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls";
import { FS } from 'https://638183.freep.cn/638183/web/ku/fscreen.js';

let rotRaf, isPaused = true, balls = [];

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, tz.offsetWidth / tz.offsetHeight, 0.1, 1000);
camera.position.z = 20;
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(tz.offsetWidth, tz.offsetHeight);
tz.appendChild(renderer.domElement);

const geometry = new THREE.SphereGeometry(2, 32, 32, 0, 0.75 * Math.PI, 0, 1.8 * Math.PI);
for (let i = 0; i <= 6; i++) {
        const material = new THREE.MeshNormalMaterial({
                transparent: true,
                opacity: 0.25,
                wireframe: true,
                side: THREE.DoubleSide
        });
        const ball = new THREE.Mesh(geometry, material);
        const radian = (360 / 6) * (Math.PI / 180);
        ball.rotateY(Math.random() * 180);
        if (i < 6) ball.position.set(6 * Math.sin(radian * i), 6 * Math.cos(radian * i), 0);
        balls.push(ball);
        scene.add(ball);
}

const controller = new OrbitControls(camera, renderer.domElement);
controller.autoRotate = true;

isPaused = aud.paused;

const mState = () => {
        isPaused = aud.paused;
        aud.paused ? cancelAnimationFrame(rotRaf) : rotating();
};

const rotating = () => {
        if (isPaused ) return;
        balls.forEach(b => b.rotation.y -= Math.random() * 0.05);
        controller.update();
        renderer.render(scene, camera);
        rotRaf = requestAnimationFrame(rotating);
};

window.onresize = () => renderer.setSize(tz.offsetWidth, tz.offsetHeight);

aud.onplaying = aud.onpause = () => mState();
aud.onseeked = () => cancelAnimationFrame(rotRaf);

rotating();
FS(tz, player);

</script>

小辣椒 发表于 2025-5-12 22:04

中间圆球是代码特效

liumang 发表于 2025-5-13 00:20

{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2025-5-13 00:20

好听的小提琴演奏{:5_160:}

liumang 发表于 2025-5-13 00:21

代码特效漂亮，欣赏小辣椒的漂亮制作

liumang 发表于 2025-5-13 00:22

雪景加的好，我爱你塞北的雪{:5_128:}{:5_128:}

liumang 发表于 2025-5-13 00:22

感谢分享{:5_124:}
页: [1]
查看完整版本: 欣赏小提琴演奏