花简静贴子代码及说明汇总（翻页有新贴）

花简静

花简静

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/css/tz01.css';
   
3.         #pa { --offsetX: 0px; margin: 150px 0; left: calc(50% - 101px);width: clamp(600px, 90vw, 1700px); height: auto; aspect-ratio: 17/12;--bg: #ccc url('https://642303.freep.cn/642303/tu/20250928zqgq.webp') no-repeat center/cover; }
   
4.         #progress { position: absolute; top:36%;right:20%;width: 6vw; height: 6vw; transition: .4s; }
   
5.         #prog, #track { fill: none; stroke: url(#lGrd); stroke-width: 16; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
   
6.         #prog { stroke: lightblue; stroke-opacity: .4; }
   
7.         #g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#grd); animation: rotate 8s linear infinite var(--state); }
   
8.         #btnFs { bottom: 20px; color:         IndianRed; border-color: currentColor!important; }
   
9.         .qk-vid { position: absolute; mix-blend-mode: screen;opacity: .55;width:110%; height:110%;left:00%;bottom:-20%;   -webkit-mask: radial-gradient(circle, transparent, transparent,transparent,transparent,transparent,silver, silver,silver,lightgreen, transparent, transparent, transparent, transparent);pointer-events: none; }
   
10. </style>
    
11. 
    
12. <div id="pa">
    
13.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2051493350" autoplay loop></audio>
    
14.         <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/02/57/11/video63640f077eb9c.mp4" autoplay loop muted></video>
    
15.         <svg id="progress" class="hue-rotate" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
    
16.                 <defs>
    
17.                         <linearGradient id="lGrd" gradientTransform="rotate(30)">
    
18.                                 <stop offset="5%" stop-color="gold" />
    
19.                                 <stop offset="95%" stop-color="red" />
    
20.                         </linearGradient>
    
21.                 </defs>
    
22.                 <g id="g1" class="brightness"><title>ALT+X</title></g>
    
23.                 <g id="g2"><title>调节进度</title></g>
    
24.         </svg>
    
25. </div>
    
26. 
    
27. <script type="module">
    
28.         import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
    
29.         import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.0';
    
30. 
    
31.         var dr = Dr.dr(progress);
    
32.         dr.ellipse(0, 0, 140, 70,'transparent','url(#lGrd)',10).addTo(g1).rotates(5,180);
    
33.         dr.circle(0,0,180).id('track').addTo(g2);
    
34.         dr.circle(0,0,180).id('prog').addTo(g2);
    
35. 
    
36.         FS(pa, g1);
    
37. </script>

复制代码

花简静

花简静

花简静

花简静

花简静

花简静

花简静

花简静