|
|

楼主 |
发表于 2025-9-30 12:15
|
显示全部楼层
帖子代码
- <style>
- @import 'https://638183.freep.cn/638183/web/css/tz02.css';
- #pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/hsuj.webp') no-repeat center/cover; }
- #progress { position: absolute; bottom: -20px; width: 20vw; height: 20vw; transition: .4s; }
- #g1 { cursor: pointer; fill: transparent; stroke: url('#grd'); stroke-width: 6; transform-box: fill-box; transform-origin: center; animation: rotate 8s linear infinite var(--state); }
- #g2 { cursor: pointer; fill: none; stroke: #eee; stroke-opacity: .5; stroke-width: 8; stroke-linecap: round; }
- #prog { stroke: url(#grd); stroke-opacity: 1; }
- #btnFs { left: 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=494330419" autoplay loop></audio>
- <video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f3c0b41744.mp4" autoplay loop muted></video>
- <svg id="progress" class="brightness" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
- <g id="g1"><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('linearGradient', {id: 'grd',x1: 0, x2:0, y1: 0, y2: 0.75}, [['red',0],['gold',0.5],['darkred',1]]);
- dr.path('M-130 -50 C-240 220,240 220,130 -50').id('track').addTo(g2);
- dr.path('M-130 -50 C-240 220,240 220,130 -50').id('prog').addTo(g2);
- dr.ellipse(0, 0, 100, 20).addTo(g1).rotates(3);
- dr.path('M-160 0 Q0 -260,160 0').set('id','txtpath').addTo('defs');
- dr.text('梵天 · 红山', 0, 0, 'url(#grd)')
- .sets({stroke: 'darkred', 'storke-width': 2})
- .style('font: bold 2.6em sans-serif; letter-spacing: 4px; text-anchor: middle;')
- .textPath('txtpath','50%');
- FS(pa, g1);
- </script>
复制代码
|
|