花甲走四方 发表于 2026-6-26 09:59

Be Thankful For What You've Got

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: url('https://picasa.eu.org/i/2026/06/26/5x9vkj.jpg') no-repeat center/cover; }
        #ma { width: 100px; height: 100px; left: 120px; bottom: 130px; border-radius: 50%; background: url('https://638183.freep.cn/638183/small/snow.webp') no-repeat center/cover; }
        #progress { position: absolute; width: 300px; height: 300px; left: 20px; bottom: 20px; }
        #prog, #track { fill: none; stroke: silver; stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; transition: .15s; cursor: pointer; }
        #prog { stroke: green; }
        #btnFs { left: 20px; top: 20px; color: #eee; border-color: currentColor!important; }
</style>

<div id="pa">
        <audio id="aud" src="https://imgimg.qqdsw8.cn/view.php/8e3850d95e7a198d575ccc2a631f259b.mp3" autoplay loop></audio>
        <video class="pd-vid" src="https://imgimg.qqdsw8.cn/view.php/06f6635ba74fc7222bbd205440b481eb.webm" autoplay loop muted></video>
        <!-- svg路径播放进度指示 ：注意 svg 及其子标签 path 的 id -->
        <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
                <path id="track" d="M0,190 L-190,-190 Q0 -25,190 -190 L0,190" />
                <path id="prog" d="M0,190 L-190,-190 Q0 -25,190 -190 L0,190" />
        </svg>
        <div id="ma" class="brightness"></div>

</div>

<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
        FS(pa, ma);
</script>

梦江南 发表于 2026-6-26 10:10

欣赏漂亮的播放器，浪漫的画面，好听的音乐，问好高老师！{:4_187:}

梦油 发表于 2026-6-26 11:15

欣赏精美制作，问好花甲走四方。

红影 发表于 2026-6-26 14:26

歌曲温柔，制作浪漫，很美的频谱。
欣赏高老师好帖{:4_199:}
页: [1]
查看完整版本: Be Thankful For What You've Got