Epic Sport Rock

马黑黑 · 发表于 2025-7-6 08:05

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-7-6 08:05

帖子代码

<style>
#papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: #333 url('https://638183.freep.cn/638183/t24/w4/rc.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#btnFs { bottom: 30px; color: teal; border-color: teal !important; }
#vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .6; pointer-events: none; }
#player { position: absolute; width: 200px; height: 200px; filter: drop-shadow(-200px 100px 20px black); bottom: 50px; perspective: 800px; transform-style: preserve-3d; }
#player:hover { perspective: 300px; }
.sdiv { position: absolute; width: 200px; height: 200px; background: url('https://638183.freep.cn/638183/small/fi1.webp') no-repeat center/cover; cursor: pointer;filter: drop-shadow(0 0 60px black); transform: rotateX(45deg) rotateY(-15deg) rotateZ(0); animation: rot3d 6s linear infinite var(--state); }
@keyframes rot3d { to { transform: rotateX(45deg) rotateY(-15deg) rotateZ(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1982749775" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/17/17/55/video63662a4394bff.mp4" autoplay loop muted></video>
<div id="player">
<div class="sdiv"></div>
</div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';
FS(papa, player);
</script>

复制代码

马黑黑 · 发表于 2025-7-6 08:17

本帖最后由马黑黑于 2025-7-6 08:28 编辑

小播 #player 内的 sdiv 加载背景图、做 3d transform 动画，id="player" 的 HTML 标签因此是静态的，酱紫，小播投射在地面上的阴影才不会跟着四处转悠。

sdiv 的 3d 旋转不使用 rotate3d() 指令，它不太适合关键帧动画，或者说，它用于关键帧动画时不太好控制，转而使用 rotateX、rotateY、 rotateZ 替代，这三个分开的 3d 旋转指令，可以令 HTML 对象摆出固定的姿势，例如本帖的做法，@keyframes 关键帧动画在 X轴、Y轴上的角度前后不变，仅改变Z轴上的角度（0~360deg）。

指针交互：本帖引入一个 perspective（景深）设置交互，代码在第 06 行，鼠标移入小播，perspective 的值变为 300px，相对于先前设计的 800px 而言较浅，这回对小播子元素 sdiv 产生影响，这个影响也会体现在 player 在地面上的阴影。