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

花简静

花简静

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/tz/tz.c.css';
   
3.         .pa {
   
4.                 --offsetX: 0px;margin: 150px 0; left: calc(50% - 101px);width: clamp(600px, 90vw, 1700px); height: auto; aspect-ratio: 17/12;
   
5.                 --bg: tan url('https://642303.freep.cn/642303/tu/20251027cl.webp') no-repeat center/cover;
   
6.         }
   
7.         /* 进度条加壳 */
   
8.         .prog::before {
   
9.                 position: absolute;
   
10.                 content: '';
    
11.                 top: -20px;
    
12.                 width: 110%;
    
13.                 height: 50px;
    
14.                 background: rgba(19,61,76,.45);
    
15.                 border-radius: 20% 25% 30% 40%;
    
16.                 /* 随手剪裁一下 : 不考虑兼容 55 以下 chrome 浏览器可以不要 -webkit- 前缀 */
    
17.                 clip-path: polygon(0 0, 35% 10%, 35% 35%, 65% 35%, 65% 10%, 100% 0, 100% 100%, 0 100%, 0 0);
    
18.         }
    
19.         .pd-vid  {mix-blend-mode:overlay;width:100%; height:110%;   webkit-mask: radial-gradient(transparent 20%, red);
    
20.     -webkit-mask: radial-gradient(transparent 20%, red);opacity: .99;bottom:-10%}
    
21. </style>
    
22. 
    
23. <div id="tiezi" class="pa"></div>
    
24. 
    
25. <script type="module">
    
26.         import TZ from 'https://638183.freep.cn/638183/web/tz/tz.c.js'; // 导入模块
    
27.         const tz = TZ.TZ('pa'); // 声明 tz 对象
    
28.         // 视频
    
29.         tz.add('video', '', 'pd-vid', {
    
30.                 src: 'https://bpic.588ku.com/video_listen/588ku_preview/25/03/07/13/57/10/video67ca8ab69ae05.mp4'
    
31.         });
    
32.         // 音频
    
33.         tz.add('audio', '', '', {
    
34.                 src: 'https://music.163.com/song/media/outer/url?id=467164485'
    
35.         });
    
36.         // 图片小播
    
37.         tz.add('img', '', 'ma', {
    
38.                 src: 'https://642303.freep.cn/642303/za/01.png',
    
39.                 alt: '',
    
40.                 title: 'Alt+X',
    
41.                 style: '--ma-size: 2vw; bottom: 40px;'
    
42.         }).playmp3();
    
43.         // 进度条
    
44.         tz.bgprog().style('bottom: 20px;');
    
45.         // 全屏
    
46.         tz.fs().style('bottom: 20px; right: 20px');
    
47. </script>

复制代码

花简静

花简静

花简静

花简静

花简静

花简静

花简静

花简静