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

花简静

花简静

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
   
3.     .pa {
   
4.             --offsetX: 0px;margin:150px 0; left: calc(50% - 101px);width: clamp(600px, 90vw, 1800px); height: auto; aspect-ratio: 18/12;--bg: url('https://642303.freep.cn/642303/tu/20251229ydmb.webp') no-repeat center/cover;
   
5.     }
   
6.     .gRot { animation: rotate 8s linear infinite var(--state); }
   
7.     #msvg { position: absolute; bottom: 35%;right:54%;opacity: 0.3; }
   
8. </style>
   
9. 
   
10. 
    
11. <div class="pa">
    
12.     <svg id="msvg" width="90" height="90" xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200">
    
13.         <g stroke="lightyellow" stroke-width="10">
    
14.             <ellipse id="track" cx="0" cy="0" rx="95" ry="85" fill="none" />
    
15.             <ellipse id="prog" cx="0" cy="0" rx="95" ry="85" fill="none" stroke="darkorange" />
    
16.         </g>
    
17.     </svg>
    
18. </div>
    
19. 
    
20. <script type="module">
    
21.     import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js?v0';
    
22.     const tz = TZ.TZ('pa');
    
23. 
    
24.     tz.add('audio', '', '', {
    
25.             src: 'https://music.163.com/song/media/outer/url?id=2108494651'
    
26.     });
    
27. 
    
28.     tz.add('video', '', 'qk-vid', {
    
29.             src: 'https://bpic.588ku.com/video_listen/588ku_video/22/11/04/16/01/57/video6364c6f5e3503.mp4',
    
30.             style: 'opacity: 0.3;transform: rotateY(180deg);'
    
31.     });
    
32. 
    
33.     tz.svgsonsRot(4, 'msvg', 'path', {
    
34.         d: 'M0 0 C-100 100,100 100,0 0',
    
35.         fill: 'Coral'
    
36.     }).playmp3();
    
37. 
    
38.     tz.svgprog('msvg', 'track', 'prog');
    
39.    
    
40.     tz.fs().style('top: 20px; right: 20px');
    
41. </script>

复制代码

花简静

花简静

花简静

花简静

花简静

花简静

花简静

花简静