朵拉 发表于 2024-11-21 23:36

仙 瑶 TO：小辣椒（学习马黑黑免我蹉跎苦效果）

本帖最后由 朵拉 于 2024-11-22 09:39 编辑 <br /><br /><style>
        @import 'https://638183.freep.cn/638183/web/css/audlrc.css';
        #mama { margin: 30px 0 30px calc(50% - 593px); background: black url('https://pic.imgdb.cn/item/673ee125d29ded1a8cc934b3.jpg') no-repeat center/ cover; }
       
    #mama::after { position: absolute; content: '帖 赠：小辣椒'; background: grey; border-radius: 0 12px 12px 0; left: calc(100% - 150px); top: calc(50% - 300px);
width: 150px; height: 40px; display: grid; place-items: center; }
       
       
        #player { left: calc(90% - 150px); top: calc(50% - 90px); filter: hue-rotate(90deg); }
        #player:hover { filter: hue-rotate(180deg); transition: .7s; }
        #prog { bottom: 20px; width: 280px; --bg1: lightgreen; --bg2: green; --color: lightgreen; }
        #lrc { bottom: 50px; --bg: linear-gradient(rgba(0,128,0,.25),rgba(0,128,0,.75)); }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
</style>

<div id="mama" class="pa">
        <audio id="aud" src="https://file.uhsea.com/2411/905dca4ff4fd4eacd287119bf4c5faf6KB.mp3" autoplay="" loop=""></audio>
       
        <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2fd36a145.mp4" autoplay loop muted></video>
       
        <div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
        <img id="player" class="player" src="https://638183.freep.cn/638183/small/hh1.webp" alt="" />
        <div id="prog" class="prog" data-tt="00:00 00:00"></div>
</div>

<script type="module">
        import { Aud } from 'https://638183.freep.cn/638183/web/mod/audlrc.js';
var geci = [,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ];
       
        var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: geci };
        var audio = new Aud(mDatas);
        audio.play();
</script>

朵拉 发表于 2024-11-21 23:37

@马黑黑
老师 晚上好，学生交作业，请指正哈{:4_190:}

红影 发表于 2024-11-21 23:39

漂亮，欣赏朵宝好帖{:4_204:}

马黑黑 发表于 2024-11-21 23:56

{:4_199:}

老谟深虑 发表于 2024-11-22 09:41

         欣赏老师的代码音画，制作的好，点赞！

小辣椒 发表于 2024-11-23 12:20

谢谢朵拉的礼物，小辣椒收礼来迟{:4_171:}

绿叶清舟 发表于 2024-11-23 21:52

朵拉制作漂亮，仙气飘飘的

绿叶清舟 发表于 2024-11-23 21:52

朵拉制作漂亮，仙气飘飘的
页: [1]
查看完整版本: 仙 瑶 TO：小辣椒（学习马黑黑免我蹉跎苦效果）