焱鑫磊 发表于 2023-8-9 23:18

《天之大》毛阿敏

本帖最后由 焱鑫磊 于 2023-8-10 14:59 编辑 <br /><br /><style>
#papa {margin: 110px -300px; width: 1200px; height: 675px; background: url('https://pic.imgdb.cn/item/64d3a2561ddac507cc9d6047.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#papa::before, #papa::after { position: absolute; content: ''; width: 10px; height: 100px; top: 5px; -webkit-box-reflect: below 480px linear-gradient(to bottom, transparent, rgba(255,255,255,.5)); animation: change 10s infinite alternate var(--state); }
#papa::before { left: 5px; background: repeating-linear-gradient(to right,rgba(255,255,255,.4),rgba(255,255,255,.4) 5px,transparent 5px,transparent 10px); }
#papa::after { right: 5px; background: repeating-linear-gradient(to left,rgba(255,255,255,.4),rgba(255,255,255,.4) 5px,transparent 5px,transparent 10px); }
@keyframes change { to { width: 400px; } }
</style>

<div id="papa"></div>
<audio id="aud" src="https://i.mp3.wf/view.php/1332f5b548459c7959ec33dcfb0f3589.mp3" autoplay loop></audio>
<script>

(function() {
    let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/huakuai_lrc.js';
    script.charset = 'utf-8';
    document.head.appendChild(script);
    let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
    window.onload = () => {
      HCPlayer({
            papa: '#papa',
            lrcAr: geci,
            lrc_css: `
                top: 20px;
                color: lightblue;
                -webkit-box-reflect: below 540px linear-gradient(to bottom, transparent, rgba(255,255,255,.5));
                --bg: linear-gradient(rgba(10,200,100,.25),rgba(10,200,100,.7));
            `,
            player_css: `
                top: 100px;
                color: #fff;
                -webkit-box-reflect: below 400px linear-gradient(to bottom, transparent, rgba(255,255,255,.5));
                --track: lightblue;
                --prog: snow;
                --ww: 300px;
                --slider: orange;
            `,
      });
    }
})();

</script>

红影 发表于 2023-8-10 09:11

最新封装上传的效果，真漂亮的制作。欣赏焱鑫磊好帖{:4_187:}

焱鑫磊 发表于 2023-8-10 09:46

红影 发表于 2023-8-10 09:11
最新封装上传的效果，真漂亮的制作。欣赏焱鑫磊好帖

学习黑黑老师的代码！{:4_181:}

小辣椒 发表于 2023-8-10 13:43

欣赏焱鑫磊的精彩制作{:4_171:}

小辣椒 发表于 2023-8-10 13:44

刚才有声有色同样的播放器，他的动图看上去就效果好一点{:4_173:}

焱鑫磊 发表于 2023-8-10 14:51

小辣椒 发表于 2023-8-10 13:43
欣赏焱鑫磊的精彩制作

问好小辣椒！{:4_187:}

焱鑫磊 发表于 2023-8-10 14:53

小辣椒 发表于 2023-8-10 13:44
刚才有声有色同样的播放器，他的动图看上去就效果好一点

谢谢老师告知，学习去了！{:4_187:}

红影 发表于 2023-8-10 14:55

焱鑫磊 发表于 2023-8-10 09:46
学习黑黑老师的代码！

嗯嗯，这个效果很漂亮{:4_187:}
页: [1]
查看完整版本: 《天之大》毛阿敏