马黑黑 发表于 2025-9-24 13:47

空山新雨后（To樵歌）

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/ksuj.webp') no-repeat center/cover; }
        #progress { position: absolute; bottom: 20px; width: 15vw; height: 15vw; transition: .4s; }
        #g1 { cursor: pointer; fill: url(#grd); fill-opacity: .8; animation: rotate 8s linear infinite var(--state); }
        #g2 { cursor: pointer; fill: none; stroke: url(#grd); stroke-width: 10; stroke-linecap: round; }
        #prog { stroke: rgba(0,100,0,.6); }
        #btnFs { left: 20px; bottom: 20px; color: white; border-color: currentColor !important; }
</style>

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=430062600" autoplay loop></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/01/67/72/63db237ce75cf.mp4" autoplay loop muted></video>
        <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
                <g id="g1" class="sepia"><title>ALT+X</title></g>
                <g id="g2"><title>调节进度</title></g>
        </svg>
</div>

<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.0';
        var dr = Dr.dr(progress);
        dr.gradient('radialGradient', {id: 'grd'}, [['transparent',0],['green',.5],['lightgreen',1]]);
        dr.path('M0 0 Q-70 100,0 140 Q70 100,0 0').addTo(g1).rotates(5);
        dr.path('M180 0Q150 80,160 150 T-180 120').id('track').addTo(g2);
        dr.path('M180 0Q150 80,160 150 T-180 120').id('prog').addTo(g2);
        FS(pa, g1);
</script>

马黑黑 发表于 2025-9-24 13:48

<div class="codebox">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/ksuj.webp') no-repeat center/cover; }
        #progress { position: absolute; bottom: 20px; width: 15vw; height: 15vw; transition: .4s; }
        #g1 { cursor: pointer; fill: url(#grd); fill-opacity: .8; animation: rotate 8s linear infinite var(--state); }
        #g2 { cursor: pointer; fill: none; stroke: url(#grd); stroke-width: 10; stroke-linecap: round; }
        #prog { stroke: rgba(0,100,0,.6); }
        #btnFs { left: 20px; bottom: 20px; color: white; border-color: currentColor !important; }
&lt;/style&gt;

&lt;div id="pa"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=430062600" autoplay loop&gt;&lt;/audio&gt;
        &lt;video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/01/67/72/63db237ce75cf.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"&gt;
                &lt;g id="g1" class="sepia"&gt;&lt;title&gt;ALT+X&lt;/title&gt;&lt;/g&gt;
                &lt;g id="g2"&gt;&lt;title&gt;调节进度&lt;/title&gt;&lt;/g&gt;
        &lt;/svg&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
        import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.0';
        var dr = Dr.dr(progress);
        dr.gradient('radialGradient', {id: 'grd'}, [['transparent',0],['green',.5],['lightgreen',1]]);
        dr.path('M0 0 Q-70 100,0 140 Q70 100,0 0').addTo(g1).rotates(5);
        dr.path('M180 0Q150 80,160 150 T-180 120').id('track').addTo(g2);
        dr.path('M180 0Q150 80,160 150 T-180 120').id('prog').addTo(g2);
        FS(pa, g1);
&lt;/script&gt;
</div>

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

马黑黑 发表于 2025-9-24 13:49

听说樵歌秋钓收获颇丰，特此祝贺

梦油 发表于 2025-9-24 14:35

黑黑先生出手不凡。我虽然不懂代码，但优秀作品还是令我赞叹不已。
祝黑黑先生快乐！祝樵歌管理员开心！

马黑黑 发表于 2025-9-24 17:52

梦油 发表于 2025-9-24 14:35
黑黑先生出手不凡。我虽然不懂代码，但优秀作品还是令我赞叹不已。
祝黑黑先生快乐！祝樵歌管理员开心！

梦油先生晚上好！感谢认可！

樵歌 发表于 2025-9-24 18:09

空山新雨后
老樵晚来收
有心钓红嘴
无奈木上钩
{:4_170:}

樵歌 发表于 2025-9-24 18:11

秋高气爽，心里特别舒坦。感谢黑大师{:4_176:}

马黑黑 发表于 2025-9-24 18:12

樵歌 发表于 2025-9-24 18:11
秋高气爽，心里特别舒坦。感谢黑大师

{:4_191:}

马黑黑 发表于 2025-9-24 18:12

樵歌 发表于 2025-9-24 18:09
空山新雨后
老樵晚来收
有心钓红嘴


红嘴鱼据说得晚上掉，而且要去对地方

樵歌 发表于 2025-9-24 18:12

那个嫩芽般的播放器是这个吗：https://img.tukuppt.com/video_show/15653652/01/67/72/63db237ce75cf.mp4
{:4_203:}

马黑黑 发表于 2025-9-24 18:16

樵歌 发表于 2025-9-24 18:12
那个嫩芽般的播放器是这个吗：https://img.tukuppt.com/video_show/15653652/01/67/72/63db237ce75cf.mp4
...

不是。这是视频背景。播放器分两部分：控制器是旋转的图案；你说的嫩芽是鱼竿，是音频播放进度显示和控制器。

花飞飞 发表于 2025-9-24 19:27

这个纯乐还有戏曲的腔调，好听。。
小播花瓣型状变了，代码写的新品~~。。研发过程又快效果又好。。{:4_173:}

花飞飞 发表于 2025-9-24 19:28

背景山清水秀，光点粒子舞动，精灵一样。。。大赞。

马黑黑 发表于 2025-9-24 19:35

花飞飞 发表于 2025-9-24 19:28
背景山清水秀，光点粒子舞动，精灵一样。。。大赞。

谢大赞

马黑黑 发表于 2025-9-24 19:35

花飞飞 发表于 2025-9-24 19:27
这个纯乐还有戏曲的腔调，好听。。
小播花瓣型状变了，代码写的新品~~。。研发过程又快效果又好。。{:4_17 ...

还好还好

花飞飞 发表于 2025-9-24 19:52

马黑黑 发表于 2025-9-24 19:35
谢大赞

大赞比较重，需要裂墙

花飞飞 发表于 2025-9-24 19:53

马黑黑 发表于 2025-9-24 19:35
还好还好

一支代码笔。。。画尽天下美景

梦油 发表于 2025-9-24 19:56

马黑黑 发表于 2025-9-24 17:52
梦油先生晚上好！感谢认可！

不客气

红影 发表于 2025-9-24 19:58

这进度条的绘制有意思，是模仿钓钩么，本来还以为挺随意，原来是有深意{:4_173:}

红影 发表于 2025-9-24 19:59

小播的图案设计也很美。视频弄得星星点点的，感觉也非常有趣。
这个制作真美，师兄收礼开心{:4_187:}
页: [1] 2 3
查看完整版本: 空山新雨后（To樵歌）