Epic Sport Rock
<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> 帖子代码
<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: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 在地面上的阴影。 sdiv 自己最好也做设置阴影投射，目的是增强其立体感：恰当的阴影设计，会让人产生其“脱离”地面的错觉。 马黑黑 发表于 2025-7-6 08:17
小播 #player 内的 sdiv 加载背景图、做 3d transform 动画，id="player" 的 HTML 标签因此是静态的，酱紫 ...
投影部分在鼠标触碰的时候会跟着一起动。
阴影了本体离得有点远，能感觉到光源的方位。。且没有重叠部分，悬浮效果特别明显 花飞飞 发表于 2025-7-6 08:34
投影部分在鼠标触碰的时候会跟着一起动。
阴影了本体离得有点远，能感觉到光源的方位。。且没有重叠部分 ...
帖子背景图片阴影斜长，小播的阴影实际上还可以在X方向设置的更长一些 马黑黑 发表于 2025-7-6 08:17
小播 #player 内的 sdiv 加载背景图、做 3d transform 动画，id="player" 的 HTML 标签因此是静态的，酱紫 ...
45.-15，0的固定姿势，到45.-15.360，只留Z轴进行变化，就转得很很均匀，自然。。没有别的摇摇摆摆了。。{:4_173:} 马黑黑 发表于 2025-7-6 08:36
帖子背景图片阴影斜长，小播的阴影实际上还可以在X方向设置的更长一些
这才留意贴子背景上的树木的阴影是拉得又细又长的，小播一致角度一致的话就得再加黑更清晰一些。同时还得拉长，好象不好整吧{:4_173:} 一大早看到这么漂亮的作品，景色优美， 心旷神怡~~
在美好音乐中开启新的一天。。。。。。
{:4_173:} 这个立体感很突出呢，尤其鼠标交互的时候，景深的交互会带来这么奇妙的影响，同事还会影响到地面的阴影呢{:4_187:} 这样的旋转角度和这样的小播图的设置，让鼠标触动时，感觉图片中心凸起的感觉，特别奇妙{:4_199:} 红影 发表于 2025-7-6 10:24
这样的旋转角度和这样的小播图的设置，让鼠标触动时，感觉图片中心凸起的感觉，特别奇妙
{:4_191:} 红影 发表于 2025-7-6 10:22
这个立体感很突出呢，尤其鼠标交互的时候，景深的交互会带来这么奇妙的影响，同事还会影响到地面的阴影呢{: ...
本体变化，阴影会跟着变 花飞飞 发表于 2025-7-6 08:50
一大早看到这么漂亮的作品，景色优美， 心旷神怡~~
在美好音乐中开启新的一天。。。。。。
记得去把那个老钟开了，不会玩 花飞飞 发表于 2025-7-6 08:46
这才留意贴子背景上的树木的阴影是拉得又细又长的，小播一致角度一致的话就得再加黑更清晰一些。同时还得 ...
这个可以的，不过现在酱紫也挺好了 花飞飞 发表于 2025-7-6 08:42
45.-15，0的固定姿势，到45.-15.360，只留Z轴进行变化，就转得很很均匀，自然。。没有别的摇摇摆摆了。。 ...
想要摇摇摆摆的也可以 效果惊艳！谢谢马老师经典讲授与示范{:4_191:} 杨帆 发表于 2025-7-6 13:00
效果惊艳！谢谢马老师经典讲授与示范
{:4_190:} 马黑黑 发表于 2025-7-6 12:10
这个播放器的图图选得好{:4_187:} 马黑黑 发表于 2025-7-6 12:11
本体变化，阴影会跟着变
使用景深变化来让物体发生变化，这样的应用还是挺少见的{:4_187:}