岁月如风

马黑黑

马黑黑

参考代码

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/6/syrf.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; display: grid; place-items: center; position: relative; }
   
3.         #player { left: 35%; top: 10%; aspect-ratio: 1/1; width: 12%; transform-style: preserve-3d; animation: rot 8s linear infinite var(--state); cursor: pointer; position: absolute; }
   
4.         .ring { position: absolute; left: -50%; width: 100%; height: 100%; border: 8px dotted white; border-radius: 20px; background: url('https://638183.freep.cn/638183/small/texture/pgy.png') no-repeat center/cover; box-sizing: border-box; transform-origin: 100% 0%; transform: rotateY(var(--ay)); box-shadow: inset 0 0 36px green; transition: .7s; }
   
5.         #player:hover .ring { filter: hue-rotate(var(--ay)); }
   
6.         #btnFs { bottom: 20px; color: #eee; }
   
7.         .vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .45; pointer-events: none; }
   
8.         @keyframes rot {
   
9.                 from { transform: rotateX(-15deg) rotateY(0deg); }
   
10.                 to { transform: rotateX(-15deg) rotateY(360deg); }
    
11.         }
    
12. </style>
    
13. 
    
14. <div id="papa">
    
15.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2716664545" autoplay loop></audio>
    
16.         <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/01/27/17/video63654b75b7bfc.mp4" autoplay loop muted></video>
    
17.         <div id="player"></div>
    
18. </div>
    
19. 
    
20. <script type="module">
    
21.         import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    
22.         FS(papa, player);
    
23. 
    
24.         const total = 12;
    
25.         Array.from({ length: total }).forEach( (d, k) => {
    
26.                 d = document.createElement('div');
    
27.                 d.className = 'ring';
    
28.                 d.style.cssText += `--ay: ${k * 360 / total}deg`;
    
29.                 player.appendChild(d);
    
30.         });
    
31. </script>

复制代码

CSS中 #player:hover .ring {} 里巧妙利用 class="ring" 元素们的Y轴旋转角度即 --ay 变量值为 .ring 的 filter 滤镜 hue-rotate 色彩变换提供数据依据——旋转和色相变化均使用 deg 做单位。

马黑黑

.ring 选择器的两个属性值，即 left 属性和 transform-origin 属性，它们的配套设置让 class="ring" 的元素们的排列达成展开超越容器尺寸并合体的中心与容器中心重合的目的。当然设置方式可以是多样的，不一定非得如此。

朵拉

这也太美了吧，学习下

梦江南

真美！鼠标触碰还会变颜色呢！

樵歌

很神奇，那旋转的天书样的还会不断变色。

杨帆

漂亮！谢谢马老师勇于创新与精彩分享

马黑黑

杨帆 发表于 2025-7-22 21:03
漂亮！谢谢马老师勇于创新与精彩分享

马黑黑

朵拉 发表于 2025-7-22 17:31
这也太美了吧，学习下

马黑黑

梦江南 发表于 2025-7-22 18:44
真美！鼠标触碰还会变颜色呢！

马黑黑

樵歌 发表于 2025-7-22 20:51
很神奇，那旋转的天书样的还会不断变色。

黑天鹅读的自然是天书

红影

马黑黑 发表于 2025-7-22 12:47
.ring 选择器的两个属性值，即 left 属性和 transform-origin 属性，它们的配套设置让 class="ring" 的元素 ...

这个设置很巧妙，可以让合体的中心与容器中心重合，也保证了转动在中心上

红影

马黑黑 发表于 2025-7-22 12:38
参考代码

CSS中 #player:hover .ring {} 里巧妙利用 class="ring" 元素们的Y轴旋转角度即 --ay 变量值为 ...

“ --ay 变量值为 .ring 的 filter 滤镜 hue-rotate 色彩变换提供数据依据”
这个没想到。其实设置个度数也是很方便的事。
感觉这个触碰变色只让部分叶片变色了的感觉，一半叶片是变色的，另一半不变色。不知道为什么。

红影

在黑黑的创意中，这些播放器形态的设计真是千变万化呢，厉害

马黑黑

红影 发表于 2025-7-22 22:12
“ --ay 变量值为 .ring 的 filter 滤镜 hue-rotate 色彩变换提供数据依据”
这个没想到。其实设置个度 ...

角度小的，变色不明显。

马黑黑

红影 发表于 2025-7-22 22:13
在黑黑的创意中，这些播放器形态的设计真是千变万化呢，厉害

就是一些细节的调整

马黑黑

红影 发表于 2025-7-22 22:10
这个设置很巧妙，可以让合体的中心与容器中心重合，也保证了转动在中心上

多弄弄都可以按自己的意思去实现

红影

马黑黑 发表于 2025-7-22 22:58
角度小的，变色不明显。

哦，还不如给它的固定的角度呢。

红影

马黑黑 发表于 2025-7-22 22:58
就是一些细节的调整

细节的调整，带来了不同的效果呢

红影

马黑黑 发表于 2025-7-22 22:59
多弄弄都可以按自己的意思去实现

这个感觉挺难，必须配套呢，否则就会出问题