朵拉 发表于 2024-5-18 17:23

想你就写信 TO：论坛朋友们520快乐！

本帖最后由 朵拉 于 2024-5-18 21:29 编辑 <br /><br /><style>
    #mydiv { margin: 20px 0 20px calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 576px; background: url('https://pic.imgdb.cn/item/6648a414d9c307b7e9d55bac.jpg') no-repeat center/cover; overflow: hidden; border: 1px solid gray; position: relative; }
    #player { position: absolute; bottom: 0; }
    #lrc { position: absolute; top: 20px; }
    li-zi { position: absolute; width: 20px; height: 20px; background: purple; }
    @keyframes moving { from { opacity: 0; transform: rotate(0) translate(0,0); } to { opacity: 1; transform: rotate(180deg) translate(var(--x0),var(--y0)); } }
</style>

<div id="mydiv">
    <!-- 两个canvas各司其职，id唯一，尺寸自设，布局定位使用CSS设置; audio id唯一 -->
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1887327731" loop autoplay></audio>
    <canvas id="player" width="460" height="80"></canvas>
    <canvas id="lrc" width="800" height="50"></canvas>
</div>

<script>
    var sF = document.createElement('script');
    sF.charset = 'utf-8';
    sF.src = 'https://638183.freep.cn/638183/web/js2024/canv_lineprog_player.js';
    document.body.appendChild(sF);
    //html粒子
    var all = 120;
    for(var i = 0; i < all; i++) {
      var lz = document.createElement('li-zi');
      var hudu = Math.PI / 180 * 360 / all * i;
      var xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
      var size = Math.random() * 15 + 5;
      lz.style.cssText += `
            --x0: ${xx}px;
            --y0: ${yy}px;
            width: ${size}px;
            height: ${size}px;
            animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
      `;
      mydiv.prepend(lz);
    }
    //播放器配置 track - 进度条底色; prog - 进度条、滑块、文本颜色; lrc1、lrc2 - 歌词渐变色
    var colors = {track: 'pink', prog: 'white', lrc1: 'snow', lrc2: 'darkred'};
    //歌词 lrcAr 名称唯一
    var lrcAr = [ ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ];
</script>

朵拉 发表于 2024-5-18 17:37

本帖最后由 朵拉 于 2024-5-18 21:33 编辑

方文山作词，周杰伦作曲
两人完美合作~~{:4_204:}

红影 发表于 2024-5-18 20:03

估计什么地方有误？

朵拉 发表于 2024-5-18 21:09

@马黑黑
老师 晚上好，学生已修改，请指正哈{:4_190:}
另：祝马黑黑老师520快乐~~{:4_204:}

朵拉 发表于 2024-5-18 21:18

@樵歌
@红影
@小辣椒
@走过岁月
@冬天的雨
@绿叶清舟
@辫子哥哥
@愤怒的葡萄
@千羽
等等~~
祝朋友们520快乐，天天快乐{:4_204:}{:4_204:}

马黑黑 发表于 2024-5-18 21:30

今天是我要发{:4_170:}

发了后天才那个啥{:4_189:}

朵拉 发表于 2024-5-18 21:31

马黑黑 发表于 2024-5-18 21:30
今天是我要发

发了后天才那个啥

今天我先发，
老师随后发哈{:4_204:}

走过岁月 发表于 2024-5-18 21:34

好看，散发的粒子，播放器按钮和进度条做得好

走过岁月 发表于 2024-5-18 21:37

听着音乐，心弦微动，好想写信给朵拉

马黑黑 发表于 2024-5-18 21:47

朵拉 发表于 2024-5-18 21:31
今天我先发，
老师随后发哈

{:4_172:}

梦油 发表于 2024-5-19 09:34

我爱你——花潮论坛！

愤怒的葡萄 发表于 2024-5-19 15:34

朵拉 发表于 2024-5-18 21:18
@樵歌
@红影
@小辣椒


也祝朵拉520快乐！~~~

小辣椒 发表于 2024-5-19 21:22

朵拉 发表于 2024-5-18 21:18
@樵歌
@红影
@小辣椒


谢谢朵拉，一起520快乐！{:4_179:}

冬天的雨 发表于 2024-5-20 19:51

谢谢朵拉，520开心快乐！{:4_187:}

冬天的雨 发表于 2024-5-20 19:52

小辣椒 发表于 2024-5-19 21:22
谢谢朵拉，一起520快乐！

谢谢小辣椒转告，520开心快乐！{:4_179:}

绿叶清舟 发表于 2024-5-21 20:35

谢谢朵拉520一起快乐
页: [1]
查看完整版本: 想你就写信 TO：论坛朋友们520快乐！