冬天的雨 发表于 2025-7-31 18:12

大地（国语版）套用马老师 Elevate 播放器效果

<style>
    @import 'https://638183.freep.cn/638183/web/css/tz01.css?v=0.1';
    #pa { --offsetX: 81px; --bg: url('https://file.uhsea.com/2411/b16d55b3a152f4d5a84bb46927bb15de0I.jpg ') no-repeat center/cover; --ma-size: 200px; }
    #btnFs { bottom: 20px; color: #eee; }
    #mwrap { position: absolute; left: 44%; bottom: 25%; width: 400px; height: 400px; }
    #ma { left: 100px; bottom: 90px; display: grid; place-items: center; }
    #ma::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: cyan; }
    .son { position: absolute; width: 100%; height: 1px; background: linear-gradient(to right, var(--bg1), var(--bg2)); transform: rotate(var(--a)); display: grid; place-items: center; }
    .son::before, .son::after { content: ''; position: absolute; width: 24px; height: 24px; background: inherit; border-radius: 50%; left: 0; }
    .son::after { left: calc(100% - 20px); }
    .ani { animation: flash 1s linear alternate var(--state), rotate 1s linear var(--state); }
    @keyframes flash { to { color: red; opacity: .7; } }
</style>

<div id="pa">
    <audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/778d-audiofreehighqps/6E/BC/GMCoOSEI2rnMACAAAAJbQ27i.flac" autoplay loop></audio>
    <video class="pd-vid" src="https://video-qn.51miz.com/preview/video/00/00/69/18/V-691883-5EDA4792.mp4" autoplay loop muted></video>
    <div id="mwrap">
      <div id="ma" class="brightness"></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 - 120, r = 170;
      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( (son, key) => {
      son = document.createElement('div');
      son.className = 'son';
      son.style.cssText += `
            --bg1: #${Math.random().toString(16).substring(2, 8)};
            --bg2: #${Math.random().toString(16).substring(2, 8)};
            --a: ${key * 180 / total}deg;
      `;
      ma.appendChild(son);
    });
</script>

冬天的雨 发表于 2025-7-31 18:13

速度完成一个，直接套用，以前的图片和音乐{:4_170:}

冬天的雨 发表于 2025-7-31 18:13

感谢马老师源码分享@马黑黑

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

冬天的雨 发表于 2025-7-31 18:13
感谢马老师源码分享@马黑黑

{:4_191:}

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

漂亮。欣赏冬小雨好帖{:4_199:}

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

视频的logo还在，是不是选错了，应该选择class="qk-vid" 而不是国宝的那个{:4_187:}
冬小雨把class="pd-vid"改成class="qk-vid" 试试。

杨帆 发表于 2025-7-31 21:58

漂亮！谢谢冬雨精彩分享{:4_191:}

小辣椒 发表于 2025-8-2 15:22

冬天的雨 发表于 2025-7-31 18:13
速度完成一个，直接套用，以前的图片和音乐

冬雨速度快的，给你换了个背景视频

小辣椒 发表于 2025-8-2 15:23

一首无损音乐特别好听{:4_199:}
页: [1]
查看完整版本: 大地（国语版）套用马老师 Elevate 播放器效果