冰封之舞

马黑黑

马黑黑

参考代码

1. <style>
   
2.     #pa { 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/u00.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; perspective: 800px; display: grid; place-items: center; position: relative; }
   
3.     #btnFs { bottom: 20px; color: #eee; }
   
4.     #ma { position: absolute; aspect-ratio: 1/1; width: 25%; cursor: pointer; transform-style: preserve-3d; animation: rot 18s linear infinite var(--state); }
   
5.     #ma:hover .son { filter: sepia(1); }
   
6.     .son { position: absolute; left: 50%; width: 50%; height: 50%; background: url('https://638183.freep.cn/638183/small/f1.png') no-repeat center/ 50% 100%; border: 1px solid tan; border-radius: 54% 46% 93% 7% / 93% 41% 59% 7%; transform-origin: 0% 100%; transform: rotateY(var(--a)); box-shadow: inset 0 0 20px cyan, 1px 1px 8px snow; transition: .75s; }
   
7.     .son::before { position: absolute; content: ''; left: -100%; top: 100%; width: 100%; height: 100%; background: inherit; border: inherit; border-radius: inherit; box-shadow: inherit; filter: grayscale(1) opacity(0.25); transform: scale(-1, -1); }
   
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: .45; pointer-events: none; }
   
9.     @keyframes rot { to { transform: rotateY(360deg); } }
   
10. </style>
    
11. 
    
12. <div id="pa">
    
13.     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2136438007" autoplay loop></audio>
    
14.     <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/03/11/34/video636563e6dc5bc.mp4" autoplay loop muted></video>
    
15.     <div id="ma"></div>
    
16. </div>
    
17. 
    
18. <script type="module">
    
19.     import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    
20.     FS(pa, ma);
    
21.     const tt = 10;
    
22.     for (var i = 0; i < tt; i ++) {
    
23.         const d = document.createElement('div');
    
24.         const c1 = Math.random().toString(16).substring(2, 8), c2 = Math.random().toString(16).substring(2, 8);
    
25.         d.className = 'son';
    
26.         d.style.cssText += `--a: ${i * 360 / tt}deg;`;
    
27.         ma.appendChild(d);
    
28.     }
    
29. </script>

复制代码

马黑黑

css 3d小播主要特色：利用 .son::before 伪元素选择器制作虚拟的倒影，这是全尺寸倒影，灰度化原影像、设置较大的透明度。

此前，曾使用过线性渐变图像于 mask 遮罩做虚拟倒影，效果非常好。

梦江南

羽毛做成像荷花一样旋转，很漂亮，还有倒影。太赞了！

杨帆

漂亮！尤其虚拟倒影效果特棒，谢谢马老师经典分享

马黑黑

杨帆 发表于 2025-7-23 15:54
漂亮！尤其虚拟倒影效果特棒，谢谢马老师经典分享

马黑黑

梦江南 发表于 2025-7-23 15:42
羽毛做成像荷花一样旋转，很漂亮，还有倒影。太赞了！

谢赞

红影

这个是border-radius的8个数值的设置呢，这个还带倒影的，太漂亮了

红影

颜色设置也好漂亮，并不是背景色，而是阴影色。鼠标触碰的颜色变化也好看。这个的不是色相变化了。

红影

跑道那个在线做边框的网站去看了一下，原来54% 46% 93% 7% / 93% 41% 59% 7%这个配置的大圆在右上，不是我想象中的左上呢。里面的羽毛加得也好看

马黑黑

红影 发表于 2025-7-23 18:48
这个是border-radius的8个数值的设置呢，这个还带倒影的，太漂亮了

八个值的确切含义：

    1    2
5            6
8            7
    4    3

马黑黑

红影 发表于 2025-7-23 18:49
颜色设置也好漂亮，并不是背景色，而是阴影色。鼠标触碰的颜色变化也好看。这个的不是色相变化了。{:4_187: ...

sepia() 函数将图像转换为深褐色，取值 0~1 或 0%~100%，0不变，数值越大，深褐色程度越大。

马黑黑

红影 发表于 2025-7-23 18:55
跑道那个在线做边框的网站去看了一下，原来54% 46% 93% 7% / 93% 41% 59% 7%这个配置的大圆在右上，不是我 ...

单单看数值有时候容易犯糊涂，不过可以多观察，建立其数值和效果的关系

红影

马黑黑 发表于 2025-7-23 19:38
八个值的确切含义：

    1    2

嗯，也是按上下左右的大原则来的，只是次序上是上上下下左右左右。
谢谢黑黑，学习了

红影

马黑黑 发表于 2025-7-23 19:42
sepia() 函数将图像转换为深褐色，取值 0~1 或 0%~100%，0不变，数值越大，深褐色程度越大。

你这个已经取了1，是最大了。

红影

马黑黑 发表于 2025-7-23 19:44
单单看数值有时候容易犯糊涂，不过可以多观察，建立其数值和效果的关系

饿呢，要熟悉图形和数值的对应，需要好好熟悉一下呢。

马黑黑

红影 发表于 2025-7-23 20:32
你这个已经取了1，是最大了。

是的

马黑黑

红影 发表于 2025-7-23 20:31
嗯，也是按上下左右的大原则来的，只是次序上是上上下下左右左右。
谢谢黑黑，学习了

其实我也做过一个类似的但可以突破一个角的角度总和不一定等于100的（这个网站遵循这个100的原则，其意在于保持边框圆润的流水线形态）：

http://mhh.52qingyin.cn/art/show ... rt=mahei_1725773586

马黑黑

红影 发表于 2025-7-23 20:33
饿呢，要熟悉图形和数值的对应，需要好好熟悉一下呢。

不过只需要了解参数对应的半角就好

马黑黑

红影 发表于 2025-7-23 20:31
嗯，也是按上下左右的大原则来的，只是次序上是上上下下左右左右。
谢谢黑黑，学习了