论坛 › 动画音画 › Synthetech

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

Synthetech

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/w6/syntpng.webp') no-repeat center/cover; }
        #progress { position: absolute; width: 260px; height: 260px; right: 30px; top: 0; }
        #prog, #track { fill: none; stroke: #128CA0; stroke-opacity: .4; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
        #track { stroke-dasharray: 4 10; stroke-dashoffset: 50%; animation: move 1s linear infinite var(--state); }
        #prog { stroke-opacity: 1; }
        #player { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: #128CA0; fill-rule: evenodd; animation: rotate 8s linear infinite var(--state); }
        #btnFs { right: 20px; bottom: 20px; color: teal; border-color: currentColor!important; }
        .vid { opacity: .85; transition: 1s; }
        #pa:hover .vid { transform: scale(1.2); }
        @keyframes move { to { stroke-dashoffset: 0; } }
</style>

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1371757762" autoplay loop></audio>
        <video class="vid pd-vid" src="https://img.tukuppt.com/video_show/15653652/02/64/00/64449319e3976.mp4" autoplay loop muted></video>
        <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
                <polygon id="player" class="invert" points="91.88 252.07 274.82 106.18 173.30 316.99 173.30 83.01 274.82 293.82 91.88 147.93 320.00 200.00 91.88 252.07"><title>Alt+X</title></polygon>
                <path id="track" d="M30 200 Q200 520,370 200"><title>调节进度</title></path>
                <path id="prog" d="M30 200 Q200 520,370 200"><title>调节进度</title></path>
        </svg>
</div>

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

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

<div class="codebox">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/w6/syntpng.webp') no-repeat center/cover; }
        #progress { position: absolute; width: 260px; height: 260px; right: 30px; top: 0; }
        #prog, #track { fill: none; stroke: #128CA0; stroke-opacity: .4; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
        #track { stroke-dasharray: 4 10; stroke-dashoffset: 50%; animation: move 1s linear infinite var(--state); }
        #prog { stroke-opacity: 1; }
        #player { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: #128CA0; fill-rule: evenodd; animation: rotate 8s linear infinite var(--state); }
        #btnFs { right: 20px; bottom: 20px; color: teal; border-color: currentColor!important; }
        .vid { opacity: .85; transition: 1s; }
        #pa:hover .vid { transform: scale(1.2); }
        @keyframes move { to { stroke-dashoffset: 0; } }
&lt;/style&gt;

&lt;div id="pa"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=1371757762" autoplay loop&gt;&lt;/audio&gt;
        &lt;video class="vid pd-vid" src="https://img.tukuppt.com/video_show/15653652/02/64/00/64449319e3976.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"&gt;
                &lt;polygon id="player" class="invert" points="91.88 252.07 274.82 106.18 173.30 316.99 173.30 83.01 274.82 293.82 91.88 147.93 320.00 200.00 91.88 252.07"&gt;&lt;title&gt;Alt+X&lt;/title&gt;&lt;/polygon&gt;
                &lt;path id="track" d="M30 200 Q200 520,370 200"&gt;&lt;title&gt;调节进度&lt;/title&gt;&lt;/path&gt;
                &lt;path id="prog" d="M30 200 Q200 520,370 200"&gt;&lt;title&gt;调节进度&lt;/title&gt;&lt;/path&gt;
        &lt;/svg&gt;
&lt;/div&gt;

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

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

红影 发表于 2025-9-14 13:56

这个进度条的底轨还弄了虚线偏移，看起来好像进度条有粒子在发射一般，真神奇{:4_187:}
视频鼠标触碰时还有大小的变化，漂亮{:4_199:}

红影 发表于 2025-9-14 13:58

这视频配着背景真好，黑黑总能找到合适的视频呢{:4_187:}

花飞飞 发表于 2025-9-14 17:01

prog,track,play三者用的颜色一样一样的，只是因为透明度不同，显示出来的就是三个样子。。
虚线好看，设成4，10应该间隔挺大的，但因线宽是10，偏移后成了密集的点状了。。

花飞飞 发表于 2025-9-14 17:05

这个视频的室内背景可以当主体图，静态色彩图片可以当装饰了。。。{:4_173:}
给视频一个触碰变1.2倍的效果，触到就靠近一点，这跟活得宠物一样。。

花飞飞 发表于 2025-9-14 17:09

小播触碰色彩逐渐变化成橘红色，与背景中的色彩渐变呼应。满满都是细节。。。
这带进度条的小播太好用了。随意听哪里都可以控制。。。
音乐好听。是没听过的纯乐。。{:4_173:}

马黑黑 发表于 2025-9-14 17:16

红影 发表于 2025-9-14 13:56
这个进度条的底轨还弄了虚线偏移，看起来好像进度条有粒子在发射一般，真神奇
视频鼠标触碰时还 ...

也像是水在水管里流动呀啥的

马黑黑 发表于 2025-9-14 17:17

红影 发表于 2025-9-14 13:58
这视频配着背景真好，黑黑总能找到合适的视频呢

木柄放大镜很重要

马黑黑 发表于 2025-9-14 17:17

花飞飞 发表于 2025-9-14 17:01
prog,track,play三者用的颜色一样一样的，只是因为透明度不同，显示出来的就是三个样子。。
虚线好看，设 ...

对，设置要合理

马黑黑 发表于 2025-9-14 17:18

花飞飞 发表于 2025-9-14 17:05
这个视频的室内背景可以当主体图，静态色彩图片可以当装饰了。。。
给视频一个触碰变1.2倍的效果 ...

合适的东东可以这么设置 scale

马黑黑 发表于 2025-9-14 17:19

花飞飞 发表于 2025-9-14 17:09
小播触碰色彩逐渐变化成橘红色，与背景中的色彩渐变呼应。满满都是细节。。。
这带进度条的小播太好用了。 ...

这音乐刚刚出来，作者就向我推荐了

花飞飞 发表于 2025-9-14 17:23

马黑黑 发表于 2025-9-14 17:17
对，设置要合理

嗯哪，一般都是先合情再合理。。{:4_173:}

花飞飞 发表于 2025-9-14 17:24

马黑黑 发表于 2025-9-14 17:18
合适的东东可以这么设置 scale

这个画面就特别合适。。立体感特别强

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

花飞飞 发表于 2025-9-14 17:24
这个画面就特别合适。。立体感特别强

不差的

花飞飞 发表于 2025-9-14 17:25

马黑黑 发表于 2025-9-14 17:19
这音乐刚刚出来，作者就向我推荐了

有些个音乐小盆友真好，总有好乐听。。作者跟你挺铁的。。

马黑黑 发表于 2025-9-14 17:25

花飞飞 发表于 2025-9-14 17:23
嗯哪，一般都是先合情再合理。。

情往往排斥理，有情通常无理

梦江南 发表于 2025-9-14 17:42

这帖子一看颜色就很舒服。进度条底部原来是小粒子在流动啊！{:4_187:}

花飞飞 发表于 2025-9-14 18:03

马黑黑 发表于 2025-9-14 17:24
不差的

{:4_208:}

花飞飞 发表于 2025-9-14 18:04

马黑黑 发表于 2025-9-14 17:25
情往往排斥理，有情通常无理

情理不容么，那下句是有理通常无情。。{:4_170:}

查看完整版本: Synthetech