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

花简静

花简静

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/css/tz02.css';
   
3.         #pa { --offsetX: 0px; margin: 150px 0; left: calc(50% - 101px);width: clamp(600px, 90vw, 1700px); height: auto; aspect-ratio: 17/12;--bg: tan url('https://642303.freep.cn/642303/tu/20251023woyy.webp') no-repeat center/cover; }
   
4.         #progress { position: absolute; width: 5vw; height: 5vw;right:6%;top:75%; transition: .4s; }
   
5.         #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); }
   
6.         #g2 { cursor: pointer; fill: none; stroke: url(#grd); stroke-opacity: .8; stroke-width: 8; stroke-linecap: round; }
   
7.         #prog { stroke: orange; stroke-opacity: 1; }
   
8.         #btnFs { bottom: 20px; color: white; border-color: currentColor !important; }
   
9.         @keyframes rot { to { transform: rotate(-360deg); } }
   
10.         .pd-vid  {mix-blend-mode:overlay;width:100%; -webkit-mask: linear-gradient(to bottom,transparent,transparent,red);opacity: .90;}
    
11. </style>
    
12. 
    
13. <div id="pa">
    
14.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27258678" autoplay loop></audio>
    
15.         <video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/02/20/5b51fecde9934.mp4" autoplay loop muted></video>
    
16.         <svg id="progress" class="brightness" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
    
17.                 <g id="g1"><title>ALT+X</title></g>
    
18.                 <g id="g2"><title>调节进度</title></g>
    
19.         </svg>
    
20. </div>
    
21. 
    
22. <script type="module">
    
23.         import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
    
24.         import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.1';
    
25. 
    
26.         var dr = Dr.dr(progress);
    
27. 
    
28.         dr.gradient('linearGradient', {id: 'grd',x1: 0, x2:0, y1: 0, y2: 0.75}, [['yellow',0],['orange',0.5],['yellow',1]]);
    
29.         dr.path('M-150 0 A150 150 0 0 0 150 0').id('track').addTo(g2); //M-160 50 Q0 240,160 50
    
30.         dr.path('M-150 0 A150 150 0 0 0 150 0').id('prog').addTo(g2);
    
31.         dr.polygon('0 0,-25 -120,0 -90,25 -120,0 0').addTo(g1).rotates(10);
    
32.         dr.circle(0, 0, 120).addTo('g1');
    
33.         dr.text('~r~n~', 0, -140, 'url(#grd)').style('stroke: gray; stroke-width: 2; font: bold 50px sans-serif; letter-spacing: 4px; text-anchor: middle;');
    
34. 
    
35.         FS(pa, g1);
    
36. </script>

复制代码

花简静

花简静

花简静

花简静

花简静

花简静

花简静

花简静