论坛 › 音乐沙龙 › 《星云漩涡》（学习黑黑《Dreamer》代码）

红影 发表于 2025-7-20 22:58

《星云漩涡》（学习黑黑《Dreamer》代码）

<style>
    #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://pic1.imgdb.cn/item/687cfee958cb8da5c8c899ff.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; display: grid; place-items: center; position: relative; }
    #player { position: absolute; aspect-ratio: 1/1; width: 17%; animation: rot 10s linear infinite var(--state); transform-style: preserve-3d; cursor: pointer; }
    #player:hover .ring { filter: hue-rotate(300deg); }
    .ring { position: absolute; width: 100%; height: 100%;border-radius: 30% 50%; border: 2px dotted; border-color: var(--c1) var(--c2); background: rgba(217, 77, 13, 0.15); transform: rotateY(var(--ay)); transition: filter 1s; }
    #btnFs { bottom: 20px; color: #eee; }
    .vid {position: absolute; width: 100%; height: 116%; bottom: 0; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .8; pointer-events: none; }
    @keyframes rot { to { transform: rotateY(1turn); } }
</style>

<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1874860795" autoplay loop></audio>
    <video class="vid" src="https://video.699pic.com/videos/58/38/47/a_vTyPtvp6mD7k1581583847_10s.mp4" autoplay loop muted></video>
    <div id="player"></div>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    FS(papa, player);
    var total = 20;
    Array.from({length: total}).forEach( (d,k) => {
      d = document.createElement('div');
      d.className = 'ring';
      d.style.cssText += `
            --ay: ${k * 360 / total}deg;
            --c1: #${Math.random().toString(16).substring(2, 8)};
            --c2: #${Math.random().toString(16).substring(2, 8)};
      `;
      player.appendChild(d);
    });
</script>

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

这个不太适合背景上弄树叶，把那个拿掉了，其他的都套用了。这个好像圆点更好点，就把树叶收敛了点{:4_173:}

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

一直觉得鼠标互动时的颜色太神奇了，这个真的很出乎意料呢@马黑黑 {:4_199:}

杨帆 发表于 2025-7-20 23:11

构思奇巧，效果奇妙，谢谢影子精彩分享{:4_187:}

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

红影 发表于 2025-7-20 23:01
这个不太适合背景上弄树叶，把那个拿掉了，其他的都套用了。这个好像圆点更好点，就把树叶收敛了点{:4_173: ...

border-radius可以大胆设计，会有很多神奇的形状。一般建议用四个值，左上、右上、右下、左下的顺序，都用百分比，0~100%之间；如果可以驾驭八个值，也可以大胆尝试。

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

红影 发表于 2025-7-20 23:02
一直觉得鼠标互动时的颜色太神奇了，这个真的很出乎意料呢@马黑黑

配套的transition设置大一点点的秒数，整个 hover hue-rotate的颜色变化过程能更好观察，从而提升观赏体验

梦油 发表于 2025-7-21 09:55

神奇的创意，给人以无限的联想。

红影 发表于 2025-7-21 12:35

杨帆 发表于 2025-7-20 23:11
构思奇巧，效果奇妙，谢谢影子精彩分享

谢谢杨帆鼓励，我也跟着玩个试试{:4_173:}{:4_187:}

红影 发表于 2025-7-21 12:36

马黑黑 发表于 2025-7-20 23:19
border-radius可以大胆设计，会有很多神奇的形状。一般建议用四个值，左上、右上、右下、左下的顺序，都 ...
哦，那真应该多试试，看看会弄出来什么来{:4_173:}
一般4个值就够了啊，8个值的效果可能没那么明显呢。不过有这样空间布置了，也许效果会更明显吧。

红影 发表于 2025-7-21 12:42

马黑黑 发表于 2025-7-20 23:20
配套的transition设置大一点点的秒数，整个 hover hue-rotate的颜色变化过程能更好观察，从而提升观赏体 ...

感觉这里的秒数也不算大呢，主要里面涉及要变化的颜色多{:4_173:}

红影 发表于 2025-7-21 12:44

梦油 发表于 2025-7-21 09:55
神奇的创意，给人以无限的联想。

谢谢梦油，我是跟着玩的，感觉挺好玩的{:4_187:}

杨帆 发表于 2025-7-21 13:02

红影 发表于 2025-7-21 12:35
谢谢杨帆鼓励，我也跟着玩个试试

对呀，玩中学，学中玩，其乐无穷，何乐不为呢{:4_173:}

红影 发表于 2025-7-21 14:00

杨帆 发表于 2025-7-21 13:02
对呀，玩中学，学中玩，其乐无穷，何乐不为呢

是的，轻松着玩更快乐呢{:4_187:}

梦油 发表于 2025-7-21 14:26

红影 发表于 2025-7-21 12:44
谢谢梦油，我是跟着玩的，感觉挺好玩的

你的脑子真灵。

小文 发表于 2025-7-21 14:30

十分玄幻，妙不可言。给恩师请安！问好！{:4_190:}

马黑黑 发表于 2025-7-21 20:00

红影 发表于 2025-7-21 12:36
哦，那真应该多试试，看看会弄出来什么来
一般4个值就够了啊，8个值的效果可能没那么明显呢。 ...

想做出更复杂的效果，需要8个值

马黑黑 发表于 2025-7-21 20:01

红影 发表于 2025-7-21 12:42
感觉这里的秒数也不算大呢，主要里面涉及要变化的颜色多

反正也不能太多，你可以试一下10秒

红影 发表于 2025-7-21 20:52

梦油 发表于 2025-7-21 14:26
你的脑子真灵。

这个不敢当，就是玩呢{:4_173:}

红影 发表于 2025-7-21 20:53

小文 发表于 2025-7-21 14:30
十分玄幻，妙不可言。给恩师请安！问好！

谢谢小文，这个代码是套用的，换上自己的图图和音乐就行了{:4_173:}

红影 发表于 2025-7-21 20:54

马黑黑 发表于 2025-7-21 20:00
想做出更复杂的效果，需要8个值

8个值如果都各自不同，出来的还不知什么样呢{:4_172:}

查看完整版本: 《星云漩涡》（学习黑黑《Dreamer》代码）