朵拉 发表于 2025-1-20 23:45

土坡上的狗尾草(学习马黑黑致你效果)

本帖最后由 朵拉 于 2025-1-21 08:48 编辑 <br /><br /><style>
        @import 'https://638183.freep.cn/638183/web/mod/btn_lrc.css';
        #tz { --state: running; margin: 30px 0 30px calc(50% - 593px); background: url('https://pic1.imgdb.cn/item/678e4588d0e0a243d4f5f29f.jpg') no-repeat center/cover; }
        #fsbtn { top: 20px; }
        #lrc { bottom: 20px; }
        #mplayer { left: 510px; width: 10px; height: 10px; display: grid; place-items: center; }
        .feather { position: absolute; width: 40px; height: 30px; background: url('https://pic1.imgdb.cn/item/678df921d0e0a243d4f5d852.png') no-repeat center/cover; }
</style>

<div id="tz" class="pa">
        <audio id="aud" src="https://file.uhsea.com/2501/a792caf88cce6504438198c3fa88b1f2D2.mp3" autoplay="" loop=""></audio>
       
        <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/02/27/14/43/20/video63fc51087193b.mp4" autoplay loop muted></video>
        <div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
        <div id="mplayer" class="mplayer"></div>
        <div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/btn_lrc.js';
        import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        var lrcAr = [,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
               
        ];
        var total = 9, a = 360 / total;
        for(var i = 0; i < total; i++) {
                var f = document.createElement('span');
                f.className = 'feather';
                f.style.cssText += `transform: rotate(${i * a}deg) translateY(-60px);`;
                mplayer.appendChild(f);
        }
        hcplay(tz, lrcAr);
        fscreen.fs(tz, fsbtn);
</script>

朵拉 发表于 2025-1-21 08:51

@马黑黑
老师好,学生交作业,请指正哈{:4_190:}
数值稍稍改动下,出来效果也不错~~

梦江南 发表于 2025-1-21 09:07

欣赏老师的精美音画,播放器的颜色漂亮。问好!{:4_199:}

红影 发表于 2025-1-21 16:04

漂亮的制作,欣赏朵宝好帖{:4_187:}

马黑黑 发表于 2025-1-21 19:41

{:4_199:}
页: [1]
查看完整版本: 土坡上的狗尾草(学习马黑黑致你效果)