冰封之舞

马黑黑 发表于 2025-7-23 14:18

马黑黑 发表于 2025-7-23 14:19

参考代码

<style>
#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; }
#btnFs { bottom: 20px; color: #eee; }
#ma { position: absolute; aspect-ratio: 1/1; width: 25%; cursor: pointer; transform-style: preserve-3d; animation: rot 18s linear infinite var(--state); }
#ma:hover .son { filter: sepia(1); }
.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; }
.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); }
.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; }
@keyframes rot { to { transform: rotateY(360deg); } }
</style>

<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2136438007" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/03/11/34/video636563e6dc5bc.mp4" autoplay loop muted></video>
<div id="ma"></div>
</div>

<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
const tt = 10;
for (var i = 0; i < tt; i ++) {
   const d = document.createElement('div');
   const c1 = Math.random().toString(16).substring(2, 8), c2 = Math.random().toString(16).substring(2, 8);
   d.className = 'son';
   d.style.cssText += `--a: ${i * 360 / tt}deg;`;
   ma.appendChild(d);
}
</script>

马黑黑 发表于 2025-7-23 14:23

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

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

梦江南 发表于 2025-7-23 15:42

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

杨帆发表于 2025-7-23 15:54

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

马黑黑 发表于 2025-7-23 18:31

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

{:4_190:}

马黑黑 发表于 2025-7-23 18:31

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

谢赞

红影发表于 2025-7-23 18:48

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

红影发表于 2025-7-23 18:49

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

红影发表于 2025-7-23 18:55

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

马黑黑 发表于 2025-7-23 19:38

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

1 2
5 6
8 7
4 3

马黑黑 发表于 2025-7-23 19:42

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

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

马黑黑 发表于 2025-7-23 19:44

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

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

红影发表于 2025-7-23 20:31

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

1 2

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

红影发表于 2025-7-23 20:32

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

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

红影发表于 2025-7-23 20:33

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

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

马黑黑 发表于 2025-7-23 21:23

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

是的

马黑黑 发表于 2025-7-23 21:27

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

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

http://mhh.52qingyin.cn/art/show.php?st=5&sd=5&art=mahei_1725773586

马黑黑 发表于 2025-7-23 21:27

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

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

马黑黑 发表于 2025-7-23 21:29

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

{:4_191:}

页: [1] 2 3

花潮论坛's Archiver

冰封之舞