朵拉 发表于 2024-11-22 23:48

远山如昨 TO：红影（学习马黑黑青山如昨效果）

<style>
        @import 'https://638183.freep.cn/638183/web/css/audlrc.css';
        #mama { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 800px; background: black url('https://pic.imgdb.cn/item/674068e7d29ded1a8cecf782.jpg') no-repeat center/ cover; }
        #player { width: 60px; height: 60px; bottom: 35px; animation: flash 4s linear infinite var(--state), rot 8s linear infinite var(--state); }
        #player:hover { filter: hue-rotate(180deg); transition: .7s; }
        #prog { bottom: 30px; width: 300px; --bg1: lightgreen; --bg2: green; --color: lightgreen; }
        #prog::before { width: 100%; height: 40px; left: 0; top: -30px; }
        #lrc { top: 80%; color: grey; --bg: linear-gradient(rgba(0,128,0,.25),rgba(0,128,0,.75)); }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: darken; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
        #fsbtn { position: absolute; top: 20px; color: lightgreen; padding: 2px 6px; border: 2px solid lightgreen; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
        @keyframes flash { to { filter: hue-rotate(360deg); } }
</style>

<div id="mama" class="pa">
        <audio id="aud" src="https://file.uhsea.com/2411/c4352bebf72936c46405344592f9447aHD.mp3" autoplay="" loop=""></audio>
       
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/01/53/11/video636400070365e.mp4" autoplay loop muted></video>
        <span id="fsbtn"></span>
        <div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
        <img id="player" class="player" src="https://638183.freep.cn/638183/web/svg/jupm.svg" alt="" />
        <div id="prog" class="prog" data-tt="00:00 00:00"></div>
</div>

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

朵拉 发表于 2024-11-22 23:48

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

朵拉 发表于 2024-11-22 23:50

@红影
感谢影宝一直以来的支持与指导~~
一首喜欢的歌送你，遥祝冬安哈{:4_204:}

秋思梦景 发表于 2024-11-23 07:36

问候老师好！精美代码音画佳作，精心制作分享。为您点赞！{:5_116:}{:5_108:}

红影 发表于 2024-11-23 08:06

还有这首歌啊，和黑黑的那首歌只差一个字呢。
也很好听，谢谢朵宝的好礼{:4_179:}

梦江南 发表于 2024-11-23 09:08

动作好快啊！欣赏点赞！{:4_199:}

梦油 发表于 2024-11-23 09:26

精美礼物送红影。

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

欣赏朵拉精彩的制作{:4_199:}
页: [1]
查看完整版本: 远山如昨 TO：红影（学习马黑黑青山如昨效果）