Dreamer

马黑黑

马黑黑

参考代码

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: url('https://638183.freep.cn/638183/t24/w4/dreamer.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; display: grid; place-items: center; position: relative; }
   
3.     #player { position: absolute; aspect-ratio: 1/1; width: 16%; animation: rot 10s linear infinite var(--state); transform-style: preserve-3d; cursor: pointer; }
   
4.     #player:hover .ring { filter: hue-rotate(300deg); }
   
5.     .ring { position: absolute; width: 100%; height: 100%; border-radius: 100% 0; border: 12px double; border-color: var(--c1) var(--c2); background: rgba(0, 180, 90, 0.15); transform: rotateY(var(--ay)); transition: filter 1s; }
   
6.     #btnFs { bottom: 20px; color: #eee; }
   
7.     .leaf { border-color: rgba(0, 0, 0, .5); opacity: 0.5; }
   
8.     .vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .8; pointer-events: none; }
   
9.     @keyframes rot { to { transform: rotateY(1turn); } }
   
10. </style>
    
11. 
    
12. <div id="papa">
    
13.     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1477945941" autoplay loop></audio>
    
14.     <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/24/12/36/48/video67e0e16035bad.mp4" autoplay loop muted></video>
    
15.     <div class="ring leaf"></div>
    
16.     <div id="player"></div>
    
17. </div>
    
18. 
    
19. <script type="module">
    
20.     import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    
21.     FS(papa, player);
    
22.     var total = 12;
    
23.     Array.from({length: total}).forEach( (d,k) => {
    
24.         d = document.createElement('div');
    
25.         d.className = 'ring';
    
26.         d.style.cssText += `
    
27.             --ay: ${k * 360 / total}deg;
    
28.             --c1: #${Math.random().toString(16).substring(2, 8)};
    
29.             --c2: #${Math.random().toString(16).substring(2, 8)};
    
30.         `;
    
31.         player.appendChild(d);
    
32.     });
    
33. </script>

复制代码

马黑黑

播放器的设计：梦幻炫影 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!


帖子额外添加一个修饰元素，class="ring leaf"，在 .leaf 选择器中重设border-color属性并设置opacity属性。

红影

马黑黑 发表于 2025-7-20 16:51
播放器的设计：梦幻炫影 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

这个修饰元素，class="ring leaf"的宽和高都是papa的宽高吧，而player的宽只有16%，这个开始没反应过来，还在想为什么这个叶子的大小居然对着整个背景的

红影

#player:hover .ring { filter: hue-rotate(300deg); }这个设置非常奇妙，那么多颜色一起变化，带来很奇特的感觉。这个帖子先被背景上的叶子震惊了，又被这个鼠标互动震惊了，太赞了

红影

原来视频和播放器按钮的操作都在封装里，这个真方便

马黑黑

红影 发表于 2025-7-20 17:18
原来视频和播放器按钮的操作都在封装里，这个真方便

不是一直这么用过来吗

杨帆

漂亮！谢谢马老师经典讲授与示范

马黑黑

红影 发表于 2025-7-20 17:09
#player:hover .ring { filter: hue-rotate(300deg); }这个设置非常奇妙，那么多颜色一起变化，带来很奇特 ...

filter 属性会自动创建一个 container block 层，直接干预了 dom 的结构，因此，如果在 :hover 伪类中直接让它作用于 player 从而带动子元素 ring 的外观属性跟着变化，那会不现实——ring 的 3d 效果会被破坏掉。

所以，只能令 player 的 :hover 作用于子元素 .ring :

#player:hover .ring { filter: hue-rotate(300deg); }

:hover 作用于 player 自身这么写：

#player:hover { filter: hue-rotate(300deg); } /* 改变player的颜色转换并带动子元素跟着转换颜色，但会破坏子元素的3d效果 */

马黑黑

红影 发表于 2025-7-20 17:06
这个修饰元素，class="ring leaf"的宽和高都是papa的宽高吧，而player的宽只有16%，这个开始没反应过来， ...

使用百分比也有讲究：

父元素相对或绝对定位，子元素绝对定位，这时使用百分比做子元素的宽高就是基于父元素的宽高。

如果父元素没有相对定位、也没有绝对定位，则，绝对定位的子元素的百分比宽高是以父辈们最靠近它的有绝对定位或相对定位的元素为基准。

马黑黑

杨帆 发表于 2025-7-20 17:51
漂亮！谢谢马老师经典讲授与示范

红影

马黑黑 发表于 2025-7-20 17:51
不是一直这么用过来吗

这个名称的封装还以为是全屏用的呢

红影

马黑黑 发表于 2025-7-20 17:58
filter 属性会自动创建一个 container block 层，直接干预了 dom 的结构，因此，如果在 :hover 伪类中直 ...

原来有这么多讲究了。这个虽然是作用于子元素了，感觉对 player 也有作用呢。

红影

马黑黑 发表于 2025-7-20 18:02
使用百分比也有讲究：

父元素相对或绝对定位，子元素绝对定位，这时使用百分比做子元素的宽高就是基于 ...

嗯嗯，这个设置在底图上的叶子特别奇妙，开始还以为底图上本来就有叶子痕迹呢

马黑黑

红影 发表于 2025-7-20 21:59
这个名称的封装还以为是全屏用的呢

是全屏里又加入了其它的东东

马黑黑

红影 发表于 2025-7-20 22:02
原来有这么多讲究了。这个虽然是作用于子元素了，感觉对 player 也有作用呢。

player容器没有自己的外观

马黑黑

红影 发表于 2025-7-20 22:03
嗯嗯，这个设置在底图上的叶子特别奇妙，开始还以为底图上本来就有叶子痕迹呢

绕Y轴旋转，叶子会彼此有遮盖，叶子的背景颜色使用带透明度的颜色，这些颜色在叶子重叠的区域相叠加，形成深一点的颜色。

红影

马黑黑 发表于 2025-7-20 23:43
是全屏里又加入了其它的东东

嗯嗯，这个特别好，封了那么多东西，用起来方便

红影

马黑黑 发表于 2025-7-20 23:43
player容器没有自己的外观

哦，那就没什么影响了。

红影

马黑黑 发表于 2025-7-20 23:45
绕Y轴旋转，叶子会彼此有遮盖，叶子的背景颜色使用带透明度的颜色，这些颜色在叶子重叠的区域相叠加，形 ...

这些色彩的叠加本身就很奇妙，色相变化时更奇妙