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

花简静

花简静

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
   
3.         .pa { --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/20251227kbsr.webp') no-repeat center/cover; }
   
4.         .petal { width: 50%; height: 100%; top: -50%; background: url('https://642303.freep.cn/642303/tu/c88747f820d857d2.png') no-repeat center/contain; transform-origin: 50% 100%;opacity: .39; }
   
5.         .petal::after { content: ''; position: absolute; width: 100%; height: 100%; top: 100%; background: inherit; transform: scale(1, -1); }
   
6.         .vid { width: 120%; height: auto; mix-blend-mode:screen;  right:-18%;bottom:-8%;0%cursor: pointer;
   
7.           }
   
8. </style>
   
9. 
   
10. <div id="pa" class="pa"></div>
    
11. 
    
12. <script type="module">
    
13.         import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
    
14.         const tz = TZ.TZ('pa');
    
15.         tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=402073046'});
    
16.         tz.add('video', '', 'vid', {
    
17.         src: 'https://img.tukuppt.com/video_show/2475824/00/01/52/5b44f4d7298d6.mp4',
    
18.         DisablePictureInPicture: 'true'
    
19.     }).playmp3();
    
20.         tz.add('video', '', 'qk-vid', {src: 'https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b977d9e77.mp4',
    
21.                 style: 'mix-blend-mode:screen;opacity: .69;top:-10%;height:110%;' });
    
22.         tz.add('div', 'player', 'wrap100 rot-ani', {style: 'bottom: 100px; cursor: pointer'}).playmp3();
    
23.         tz.lzRot(3, 'player', {tag: 'div', className: 'petal', angle: 180});
    
24.         tz.bgprog().style('bottom: 30px; color: LightSlateGray');
    
25.         tz.fs().style('right: 20px; bottom: 20px');
    
26. </script>

复制代码

花简静

花简静

花简静

花简静

花简静

花简静

花简静

花简静