III (Find Yourself)

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         #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; }
   
3.         #btnFs { bottom: 30px; color: teal; border-color: teal !important; }
   
4.         #player { top: 30%; }
   
5.         .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; }
   
6.         .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; }
   
7.         .player::after { width: 80%; height: 80%; --deg: 3turn; }
   
8.         .player:hover { width: 210px; height: 220px; }
   
9.         .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; }
   
10.         #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; }
    
11.         @keyframes rot { to { transform: rotate(var(--deg)); } }
    
12. </style>
    
13. 
    
14. <div id="papa">
    
15.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=31370542" autoplay loop></audio>
    
16.         <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/09/25/19/15/22/video65116bcae9f0d.mp4" autoplay loop muted></video>
    
17.         <div id="player" class="player">
    
18.                 <div class="player"></div>
    
19.         </div>
    
20. </div>
    
21. 
    
22. <script type="module">
    
23.         import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';
    
24.         FS(papa, player);
    
25. </script>

复制代码

播放器说明请查阅：设计一个简单的套娃小播 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

红影

实例中变成双线了，更好看了呢

红影

.player:hover { width: 210px; height: 220px; }
前面那帖忘记问了，为鼠标触动要让它的横纵向有不同的变化啊

马黑黑

红影 发表于 2025-7-5 13:31
实例中变成双线了，更好看了呢

还好吧

马黑黑

红影 发表于 2025-7-5 13:32
.player:hover { width: 210px; height: 220px; }
前面那帖忘记问了，为鼠标触动要让它的横纵向有不同的变 ...

你想让它们尺寸一样的也行

红影

这个人坐在大山前面找寻自我啊。这视频很漂亮奇特。这制作很漂亮

马黑黑

红影 发表于 2025-7-5 13:38
这个人坐在大山前面找寻自我啊。这视频很漂亮奇特。这制作很漂亮

找南找北容易，找自己难

红影

马黑黑 发表于 2025-7-5 13:33
还好吧

估计做成虚线也好看的

红影

马黑黑 发表于 2025-7-5 13:33
你想让它们尺寸一样的也行

哦，通常都设成一样的吧，看到这个不一样，还以为有什么说道

红影

马黑黑 发表于 2025-7-5 13:40
找南找北容易，找自己难

是的，能找到自己，也就找回了这个世界。

杨帆

漂亮！谢谢马老师经典示范、精彩分享

马黑黑

杨帆 发表于 2025-7-5 17:09
漂亮！谢谢马老师经典示范、精彩分享

这是利用CSS边框相关属性做出来的，此前也曾经有过类似的案例

马黑黑

红影 发表于 2025-7-5 14:54
是的，能找到自己，也就找回了这个世界。

我们活在这个世界里，但是我们找不到这个世界，因为我们找不到自己

马黑黑

红影 发表于 2025-7-5 14:54
哦，通常都设成一样的吧，看到这个不一样，还以为有什么说道

就是让它在鼠标悬停其上时有些微变形

马黑黑

红影 发表于 2025-7-5 14:53
估计做成虚线也好看的

虚线过去做过

杨帆

马黑黑 发表于 2025-7-5 18:40
这是利用CSS边框相关属性做出来的，此前也曾经有过类似的案例

是，有点复杂，可否实现45度倾斜平面上的旋转效果呢

马黑黑

杨帆 发表于 2025-7-5 19:10
是，有点复杂，可否实现45度倾斜平面上的旋转效果呢

那要用到 3d 旋转，这是方案一；

方案二：将小播置于一个父元素中，令该父元素做X轴倾斜。

花飞飞

现在看线圈的转动快慢差别有点明显。。刚才只留意怎么让它套了。。。
中间的图形更漂亮，视频找得跟它特别搭，像是飞轮转出来的效果一样。。

马黑黑

花飞飞 发表于 2025-7-5 21:00
现在看线圈的转动快慢差别有点明显。。刚才只留意怎么让它套了。。。
中间的图形更漂亮，视频找得跟它特别 ...

还可以细一点做设置，比如边框，有四分之三的，有四分之二的，有四分之一的，让构图更加错落有致