III (Find Yourself)
<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/self.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
#btnFs { bottom: 30px; color: teal; border-color: teal !important; }
#player { top: 30%; }
.player { position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 6px double green; border-color: orange red green transparent; transition: width .45s, height .45s; cursor: pointer; display: grid; place-items: center; animation: rot 4s linear infinite var(--state); --deg: 1turn; }
.player::before, .player::after { position: absolute; content: ''; width: 90%; height: 90%; border: inherit; border-radius: inherit; border-color: inherit; animation: rot 4s linear infinite var(--state); --deg: 2turn; }
.player::after { width: 80%; height: 80%; --deg: 3turn; }
.player:hover { width: 210px; height: 220px; }
.player > div { width: 70%; height: 70%; background: url('https://638183.freep.cn/638183/small/2025/fl102.png') no-repeat center/70% 70%; border-color: transparent purple transparent cyan; filter: drop-shadow(0 0 30px gray); --deg: 2turn; }
#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; }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=31370542" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/09/25/19/15/22/video65116bcae9f0d.mp4" autoplay loop muted></video>
<div id="player" class="player">
<div class="player"></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/self.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
#btnFs { bottom: 30px; color: teal; border-color: teal !important; }
#player { top: 30%; }
.player { position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 6px double green; border-color: orange red green transparent; transition: width .45s, height .45s; cursor: pointer; display: grid; place-items: center; animation: rot 4s linear infinite var(--state); --deg: 1turn; }
.player::before, .player::after { position: absolute; content: ''; width: 90%; height: 90%; border: inherit; border-radius: inherit; border-color: inherit; animation: rot 4s linear infinite var(--state); --deg: 2turn; }
.player::after { width: 80%; height: 80%; --deg: 3turn; }
.player:hover { width: 210px; height: 220px; }
.player > div { width: 70%; height: 70%; background: url('https://638183.freep.cn/638183/small/2025/fl102.png') no-repeat center/70% 70%; border-color: transparent purple transparent cyan; filter: drop-shadow(0 0 30px gray); --deg: 2turn; }
#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; }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=31370542" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/09/25/19/15/22/video65116bcae9f0d.mp4" autoplay loop muted></video>
<div id="player" class="player">
<div class="player"></div>
</div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';
FS(papa, player);
</script>
播放器说明请查阅：设计一个简单的套娃小播 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!
实例中变成双线了，更好看了呢{:4_187:} .player:hover { width: 210px; height: 220px; }
前面那帖忘记问了，为鼠标触动要让它的横纵向有不同的变化啊{:4_204:} 红影 发表于 2025-7-5 13:31
实例中变成双线了，更好看了呢
还好吧 红影 发表于 2025-7-5 13:32
.player:hover { width: 210px; height: 220px; }
前面那帖忘记问了，为鼠标触动要让它的横纵向有不同的变 ...
你想让它们尺寸一样的也行 这个人坐在大山前面找寻自我啊。这视频很漂亮奇特。这制作很漂亮{:4_199:} 红影 发表于 2025-7-5 13:38
这个人坐在大山前面找寻自我啊。这视频很漂亮奇特。这制作很漂亮
找南找北容易，找自己难 马黑黑 发表于 2025-7-5 13:33
还好吧
估计做成虚线也好看的{:4_173:} 马黑黑 发表于 2025-7-5 13:33
你想让它们尺寸一样的也行
哦，通常都设成一样的吧，看到这个不一样，还以为有什么说道{:4_173:} 马黑黑 发表于 2025-7-5 13:40
找南找北容易，找自己难
是的，能找到自己，也就找回了这个世界。 漂亮！谢谢马老师经典示范、精彩分享{:4_191:} 杨帆 发表于 2025-7-5 17:09
漂亮！谢谢马老师经典示范、精彩分享
这是利用CSS边框相关属性做出来的，此前也曾经有过类似的案例 红影 发表于 2025-7-5 14:54
是的，能找到自己，也就找回了这个世界。
我们活在这个世界里，但是我们找不到这个世界，因为我们找不到自己 红影 发表于 2025-7-5 14:54
哦，通常都设成一样的吧，看到这个不一样，还以为有什么说道
就是让它在鼠标悬停其上时有些微变形 红影 发表于 2025-7-5 14:53
估计做成虚线也好看的
虚线过去做过 本帖最后由 杨帆 于 2025-7-5 19:14 编辑
马黑黑 发表于 2025-7-5 18:40
这是利用CSS边框相关属性做出来的，此前也曾经有过类似的案例
是，有点复杂，可否实现45度倾斜平面上的旋转效果呢 杨帆 发表于 2025-7-5 19:10
是，有点复杂，可否实现45度倾斜平面上的旋转效果呢
那要用到 3d 旋转，这是方案一；
方案二：将小播置于一个父元素中，令该父元素做X轴倾斜。 现在看线圈的转动快慢差别有点明显。。刚才只留意怎么让它套了。。。
中间的图形更漂亮，视频找得跟它特别搭，像是飞轮转出来的效果一样。。{:4_173:} 花飞飞 发表于 2025-7-5 21:00
现在看线圈的转动快慢差别有点明显。。刚才只留意怎么让它套了。。。
中间的图形更漂亮，视频找得跟它特别 ...
还可以细一点做设置，比如边框，有四分之三的，有四分之二的，有四分之一的，让构图更加错落有致