论坛 › 动画音画 › 【黑师代码】临江仙（学习黑师20250801《失重宇宙》线圈形小播效果）

花飞飞 发表于 2025-8-7 17:39

【黑师代码】临江仙（学习黑师20250801《失重宇宙》线圈形小播效果）

<style>
    @import 'https://638183.freep.cn/638183/web/css/tz01.css?v=0.1';
    #pa { margin: 160px 0;left: calc(50% - 81px);width: clamp(600px, 90vw, 1700px); height: auto; aspect-ratio: 17/9;--bg: url('https://642303.freep.cn/642303/tu/202508007suxin01.webp') no-repeat center/cover; --ma-size: 60px; }
    #btnFs { left: 20px; bottom: 20px; color: #eee; }
   #mwrap { position: absolute; top:68.2%;left:35.8%;width: 160px; height: 160px; filter: drop-shadow(-40px 80px 0 rgba(255,240,245, .05)); }
    #ma { left: 70px; bottom: 80px; display: grid; place-items: center; transform: rotateX(45deg) rotateY(15deg); animation: rot 8s linear infinite var(--state); }
    #ma::after { content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(#c4dfb6 #6fd715); }
    .son { position: absolute; width: 100%; height: 4px; background: repeating-radial-gradient(circle, #f4efee, transparent, Pink 20%); transform: rotate(var(--a)); }
    .son::before, .son::after { content: ''; position: absolute; left: -30px; top: calc(50% - 15px); width: 30px; height: 30px; background: inherit; border-radius: 50%; }
    .son::after { left: 100%; }
    .title-text { font-size: 40px; }
    .ani { animation: flash 1s linear alternate var(--state), rotate 1s linear var(--state); }
    @keyframes flash { to { color: cyan; opacity: .7; font-size: 30px; } }
    @keyframes rot { to { transform: rotateX(45deg) rotateY(15deg) rotateZ(360deg); } }
      .pd-vid{mix-blend-mode:overlay;opacity: .79;right:-23%; top:-20%;-webkit-mask: radial-gradient(circle,   cyan, cyan,rgba(0,0,0,.65),transparent, transparent, transparent, transparent);}
</style>

<div id="pa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2648196685" autoplay loop></audio>
    <video class="pd-vid" src="https://bpic.588ku.com/video_listen/588ku_preview/20/08/13/14/47/38/video5f34e20a321c4.mp4" autoplay loop muted></video>
    <div id="mwrap">
      <div id="ma" class="invert"></div>
    </div>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    FS(pa, ma);

    var txtAr = ' '.split(''), spans = [], total = 7;

    txtAr.forEach( (t, k) => {
      var s = document.createElement('span');
      s.textContent = t;
      s.className = k === 0 ? 'title-text ani' : 'title-text';
      var a = -120 / (txtAr.length - 1) * k - 210, r = 160;
      s.style.cssText += `
            left: ${r + r * Math.cos(a * Math.PI / 180)}px;
            top: ${r + r * Math.sin(a * Math.PI / 180)}px;
      `;
      spans.push(s);
      s.onanimationend = () => {
            s.classList.remove('ani');
            spans[(k + 1) % txtAr.length].classList.add('ani');
      };
      mwrap.appendChild(s);
    });

    Array.from({length: total}).forEach( (s,k) => {
      s = document.createElement('span');
      s.classList.add('son');
      s.style.cssText += `--a: ${180 / total * k}deg;`;
      ma.appendChild(s);
    });
</script>

花飞飞 发表于 2025-8-7 17:40

@马黑黑 白老师来瞧瞧，小宇宙作业。。粉色也漂亮不是。{:4_173:}

梦江南 发表于 2025-8-7 18:35

欣赏老师漂亮的图图，小播好漂亮。{:4_187:}

马黑黑 发表于 2025-8-7 18:35

制图水平又见长了，赞个。帖子的构思细致，细节修饰到位，可观赏性极强。好帖。

红影 发表于 2025-8-7 20:06

有意思，这小播倒像是被这女子擎在手中似的，非常奇妙的制作。
欣赏飞飞好帖{:4_199:}

花飞飞 发表于 2025-8-7 20:56

梦江南 发表于 2025-8-7 18:35
欣赏老师漂亮的图图，小播好漂亮。

感谢梦江南支持哦{:4_190:}

花飞飞 发表于 2025-8-7 20:58

马黑黑 发表于 2025-8-7 18:35
制图水平又见长了，赞个。帖子的构思细致，细节修饰到位，可观赏性极强。好帖。

排字和调色相比，排字花的时间更长。。

花飞飞 发表于 2025-8-7 21:00

红影 发表于 2025-8-7 20:06
有意思，这小播倒像是被这女子擎在手中似的，非常奇妙的制作。
欣赏飞飞好帖

问好影子，感谢支持哦。。这个调了好几次发现放这里比较有意思，被你发现了{:4_204:}

马黑黑 发表于 2025-8-7 21:17

花飞飞 发表于 2025-8-7 20:58
排字和调色相比，排字花的时间更长。。

嗯嗯，文化低的人会排得快，因为识字不多，不在乎排的怎么样{:4_170:}

红影 发表于 2025-8-7 22:29

花飞飞 发表于 2025-8-7 21:00
问好影子，感谢支持哦。。这个调了好几次发现放这里比较有意思，被你发现了

飞飞的小心思总是动得很巧妙，很赞{:4_187:}

杨帆 发表于 2025-8-7 22:45

漂亮，谢谢花飞飞精彩分享{:4_204:}

花飞飞 发表于 2025-8-7 22:48

杨帆 发表于 2025-8-7 22:45
漂亮，谢谢花飞飞精彩分享

感谢杨帆临贴支持{:4_190:}

花飞飞 发表于 2025-8-7 22:49

红影 发表于 2025-8-7 22:29
飞飞的小心思总是动得很巧妙，很赞

影子支持总是很给力。。暖暖的，抱个{:4_179:}

花飞飞 发表于 2025-8-7 22:51

马黑黑 发表于 2025-8-7 21:17
嗯嗯，文化低的人会排得快，因为识字不多，不在乎排的怎么样

{:4_173:}
其实呢主要是我前天刚把2024版的PS换成了2020的，
变成排字不顺手了，
竖版的字老躺着，你看看马黑黑那几个字还没改过来。。

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

花飞飞 发表于 2025-8-7 22:51
其实呢主要是我前天刚把2024版的PS换成了2020的，
变成排字不顺手了，
竖版的字老躺着，你 ...

躺着也是一种风格

花飞飞 发表于 2025-8-8 09:01

马黑黑 发表于 2025-8-7 23:38
躺着也是一种风格

忍不了了，刚才卸了2020换回2024，
还真是由俭入奢和由高到底的区别。。
其实是刚好因为滤镜库出了点小问题，打算重装，所以顺便看看之 前版本的3D（看了还真能用）。。
没想到很多细节有这么大差别{:4_173:}

马黑黑 发表于 2025-8-8 12:50

花飞飞 发表于 2025-8-8 09:01
忍不了了，刚才卸了2020换回2024，
还真是由俭入奢和由高到底的区别。。
其实是刚好因为滤镜库出了点小 ...

一般来说，版本回退是逼不得已的情况发生了才会发生

花飞飞 发表于 2025-8-8 20:15

马黑黑 发表于 2025-8-8 12:50
一般来说，版本回退是逼不得已的情况发生了才会发生

退版二日游。。。赶紧回来了。还是常用的顺手{:4_173:}

马黑黑 发表于 2025-8-8 20:50

花飞飞 发表于 2025-8-8 20:15
退版二日游。。。赶紧回来了。还是常用的顺手

其实没必要折腾

花飞飞 发表于 2025-8-8 20:58

马黑黑 发表于 2025-8-8 20:50
其实没必要折腾

{:4_170:}此时不折腾，更待何时

查看完整版本: 【黑师代码】临江仙（学习黑师20250801《失重宇宙》线圈形小播效果）