马黑黑 发表于 2025-9-6 09:31

山河壮丽

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w6/7ae.webp') no-repeat center/cover; --ma-size: 18%; }
        #btnFs { bottom: 20px; color: silver; border-color: currentColor!important; }
        #prog { position: absolute; right: -50px; bottom: 100px; transform: rotate(-90deg); cursor: pointer; filter: hue-rotate(330deg);}
        #ma { opacity: 0.5; border-radius: 50%; }
</style>

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2614883773" autoplay loop></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/2402760/00/01/73/5b495ddab7660.mp4" autoplay loop muted></video>
        <progress id="prog"></progress>
        <div id="ma">
                <svg id="msvg" width="100%" height="100%" viewBox="-200 -200 400 400">
                        <path d="M 0 0 C -100 -250 100 -250 0 0 M 0 0 C 166.506 -211.603 266.506 -38.397 0 0 M 0 0 C 266.506 38.397 166.506 211.603 0 0 M 0 0 C 100 250 -100 250 0 0 M 0 0 C -166.506 211.603 -266.506 38.397 0 0 M 0 0 C -266.506 -38.397 -166.506 -211.603 0 0 Z" fill="teal" stroke="lightgreen" stroke-width="4" />
                </svg>
        </div>
</div>

<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';

        aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
        aud.onplaying = aud.onpause = () => msvg.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
       
        FS(pa, ma);
</script>

马黑黑 发表于 2025-9-6 09:32

<div class="codebox">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w6/7ae.webp') no-repeat center/cover; --ma-size: 18%; }
        #btnFs { bottom: 20px; color: silver; border-color: currentColor!important; }
        #prog { position: absolute; right: -50px; bottom: 100px; transform: rotate(-90deg); cursor: pointer; filter: hue-rotate(330deg);}
        #ma { opacity: 0.5; border-radius: 50%; }
&lt;/style&gt;

&lt;div id="pa"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=2614883773" autoplay loop&gt;&lt;/audio&gt;
        &lt;video class="pd-vid" src="https://img.tukuppt.com/video_show/2402760/00/01/73/5b495ddab7660.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;progress id="prog"&gt;&lt;/progress&gt;
        &lt;div id="ma"&gt;
                &lt;svg id="msvg" width="100%" height="100%" viewBox="-200 -200 400 400"&gt;
                        &lt;path d="M 0 0 C -100 -250 100 -250 0 0 M 0 0 C 166.506 -211.603 266.506 -38.397 0 0 M 0 0 C 266.506 38.397 166.506 211.603 0 0 M 0 0 C 100 250 -100 250 0 0 M 0 0 C -166.506 211.603 -266.506 38.397 0 0 M 0 0 C -266.506 -38.397 -166.506 -211.603 0 0 Z" fill="teal" stroke="lightgreen" stroke-width="4" /&gt;
                &lt;/svg&gt;
        &lt;/div&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
        import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';

        aud.ontimeupdate = () =&gt; prog.value=aud.currentTime/aud.duration;
        aud.onplaying = aud.onpause = () =&gt; msvg.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        prog.onclick = (e) =&gt; aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
       
        FS(pa, ma);
&lt;/script&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

马黑黑 发表于 2025-9-6 09:40

改变 progress 标签在现代浏览器中的颜色外观一般需要做基于浏览器内部接口的设置，比较繁琐。但可以简单地使用 filter 滤镜令其适配帖子颜色风格，hue-rotate 函数是理想的选择，也可根据需要使用其它函数。

progress 标签在本帖使用竖立方式呈现，方法是通过简单的 transform 属性的 rotate 函数实现。

小播样式使用纯SVG路径做成的六叶草，该路径基于 viewBox=“-200 -200 400 400” 的作画区域（坐标起点在SVG的中心）。

花飞飞 发表于 2025-9-6 10:39

画面视野开阔，名副其实的山河壮丽，小花播半透明，色彩柔和。。。
进度条这次变成了竖版的了。。。{:4_199:}

花飞飞 发表于 2025-9-6 10:55

进度条宽度的设置少了 width: var(--ma-size);，就不像昨天那个贴子一样可随页面大小变化。。
多了一个right: -50px;看上去只有一小条实际上还占的位置还挺大，边缘需要向右负值才比较合适。。
还加了一个色相变化，用来改变进度条里的颜色，这个挺方便的。。

马黑黑 发表于 2025-9-6 11:10

花飞飞 发表于 2025-9-6 10:39
画面视野开阔，名副其实的山河壮丽，小花播半透明，色彩柔和。。。
进度条这次变成了竖版的了。。。{:4_19 ...

有一点点小变化

马黑黑 发表于 2025-9-6 11:11

花飞飞 发表于 2025-9-6 10:55
进度条宽度的设置少了 width: var(--ma-size);，就不像昨天那个贴子一样可随页面大小变化。。
多了一个rig ...

基本的东东就你说的这些了

花飞飞 发表于 2025-9-6 11:19

马黑黑 发表于 2025-9-6 11:10
有一点点小变化

transform: rotate(-90deg);这个好啊，适合于任何需要翻转的东东

花飞飞 发表于 2025-9-6 11:20

马黑黑 发表于 2025-9-6 11:11
基本的东东就你说的这些了

光看一个贴子还不够，得两个一起对着看。。
标准的温故知新。。{:4_170:}

花飞飞 发表于 2025-9-6 11:25

马黑黑 发表于 2025-9-6 09:40
改变 progress 标签在现代浏览器中的颜色外观一般需要做基于浏览器内部接口的设置，比较繁琐。但可以简单地 ...

看到JS部分，只有中间总控的那句还比较眼熟点，所以就跑去看昨天教程去了。。{:4_173:}

梦江南 发表于 2025-9-6 11:44

赏心悦目，赞哦！{:4_187:}

马黑黑 发表于 2025-9-6 11:50

梦江南 发表于 2025-9-6 11:44
赏心悦目，赞哦！

谢赞

马黑黑 发表于 2025-9-6 11:51

花飞飞 发表于 2025-9-6 11:25
看到JS部分，只有中间总控的那句还比较眼熟点，所以就跑去看昨天教程去了。。

代码那么少，就算不理解，背都可以背下来

马黑黑 发表于 2025-9-6 11:51

花飞飞 发表于 2025-9-6 11:20
光看一个贴子还不够，得两个一起对着看。。
标准的温故知新。。

这个其实是小儿科了，幼儿园小班话一分钟就能理解的

小文 发表于 2025-9-6 12:14

好美好美！问好先生，极欣赏！

红影 发表于 2025-9-6 12:58

最简洁的进度条便竖向的了，还有颜色的改变。
总觉得有进度条特别好，可以随意自己调节音乐进度了{:4_199:}

红影 发表于 2025-9-6 13:02

这底图的选择好漂亮，这弯曲河流像条丝带，勾勒出一幅宁静悠然的画面。
小播也好漂亮。最有趣的是视频的选取，很容易暂停到什么也没有的状态里，开始还以为是动图呢{:4_173:}

红影 发表于 2025-9-6 13:03

如此优美壮丽的山河{:4_187:}

花飞飞 发表于 2025-9-6 18:38

马黑黑 发表于 2025-9-6 11:51
代码那么少，就算不理解，背都可以背下来

单词太长了，我还是理解个大概再背{:4_170:}

花飞飞 发表于 2025-9-6 18:39

马黑黑 发表于 2025-9-6 11:51
这个其实是小儿科了，幼儿园小班话一分钟就能理解的

只有儿科，没有小儿科{:4_173:}
页: [1] 2 3
查看完整版本: 山河壮丽