马黑黑 发表于 2025-9-27 09:06

Rasa

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

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=413812699" autoplay loop></audio>
        <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/10/16/41/30/video67cea5ba55313.mp4" autoplay loop muted></video>
        <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/24/13/59/29/video67e0f4c17e4d2.mp4" autoplay loop muted></video>
        <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
                <g id="g1" class="brightness"><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.1';
        var dr = Dr.dr(progress);
        dr.gradient('radialGradient', {id: 'grd'}, [['cyan',0],['teal',0.5],['cyan',1]]);
        dr.path('M0 0 L-35 -40 Q0 -200,35 -40 L0 0').addTo(g1).rotates(5);
        dr.path('M-190 0 A200 200 0 0 0 190 0 L0 -190 L-190 0').id('track').addTo(g2);
        dr.path('M-190 0 A200 200 0 0 0 190 0 L0 -190 L-190 0').id('prog').addTo(g2);
        FS(pa, g1);
</script>

马黑黑 发表于 2025-9-27 09:07

帖子代码：

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

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=413812699" autoplay loop></audio>
        <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/10/16/41/30/video67cea5ba55313.mp4" autoplay loop muted></video>
        <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/24/13/59/29/video67e0f4c17e4d2.mp4" autoplay loop muted></video>
        <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
                <g id="g1" class="brightness"><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.1';
        var dr = Dr.dr(progress);
        dr.gradient('radialGradient', {id: 'grd'}, [['cyan',0],['teal',0.5],['cyan',1]]);
        dr.path('M0 0 L-35 -40 Q0 -200,35 -40 L0 0').addTo(g1).rotates(5);
        dr.path('M-190 0 A200 200 0 0 0 190 0 L0 -190 L-190 0').id('track').addTo(g2);
        dr.path('M-190 0 A200 200 0 0 0 190 0 L0 -190 L-190 0').id('prog').addTo(g2);
        FS(pa, g1);
</script>

梦江南 发表于 2025-9-27 09:20

背景图片好漂亮！小播又出新了。{:4_199:}

马黑黑 发表于 2025-9-27 12:04

梦江南 发表于 2025-9-27 09:20
背景图片好漂亮！小播又出新了。

{:4_190:}

红影 发表于 2025-9-27 14:05

这小播设计和陪色都好美啊{:4_199:}

马黑黑 发表于 2025-9-27 18:38

红影 发表于 2025-9-27 14:05
这小播设计和陪色都好美啊

还好

小辣椒 发表于 2025-9-27 22:59

这个背景图漂亮，配这个播放器刚好，佩服黑黑总能找到合适的视频背景

红影 发表于 2025-9-27 23:49

马黑黑 发表于 2025-9-27 18:38
还好

这个帖子整体效果特别好呢{:4_187:}

马黑黑 发表于 2025-9-28 12:25

红影 发表于 2025-9-27 23:49
这个帖子整体效果特别好呢

是不是呀？

马黑黑 发表于 2025-9-28 12:25

小辣椒 发表于 2025-9-27 22:59
这个背景图漂亮，配这个播放器刚好，佩服黑黑总能找到合适的视频背景

不会制作视频就只能找视频啦{:4_170:}

朵拉 发表于 2025-9-30 09:07

漂亮效果，学生已交作业，请老师指正{:4_190:}

马黑黑 发表于 2025-9-30 12:08

朵拉 发表于 2025-9-30 09:07
漂亮效果，学生已交作业，请老师指正

{:4_199:}
页: [1]
查看完整版本: Rasa