一半的电影

马黑黑

马黑黑

帖子代码：

1. <style>
   
2.   @import 'https://638183.freep.cn/638183/tzmaker/tz5.css';
   
3.   .pa { --bg: linear-gradient(black, darkred, red); --ma-size: 8%; }
   
4.   .pa::before, .pa::after { content: ''; position: absolute; left: 0; top: 0; width: calc(50% - 2px); height: 100%; background: url('https://638183.freep.cn/638183/t24/w8/half.webp') no-repeat center/cover; }
   
5.   .pa::after { left: calc(50% + 2px); transform: scale(-1,1); mix-blend-mode: screen; }
   
6.   .pd-vid { opacity: 1; mix-blend-mode: screen; }
   
7. </style>
   
8. 
   
9. <div class="pa"></div>
   
10. 
    
11. <script>
    
12. var gc = `
    
13. [00:01.436]编曲：J.well\n[00:04.691]混音：J.well\n[00:09.938]\n[00:12.934]“天上有一朵云，和你笑的时候一样美。”\n[00:24.444]\n[00:25.937]旧记忆里关于你\n[00:30.685]空缺的日记\n[00:34.194]我们的剧情\n[00:39.186]只剩陌生的自己\n[00:43.688]一半的梦里\n[00:46.940]未知的结局\n[00:52.189]一路走过空白的风景\n[00:56.689]原来还在意你的消息\n[01:05.191]一路上触碰旧的回忆\n[01:09.937]无法忘记残存在心里\n[01:18.193]爱你是一半的电影\n[01:22.684]放映再清晰\n[01:25.371]看不到你身影\n[01:30.875]再见是落幕的心情\n[01:35.622]回忆是分镜\n[01:38.875]在梦中转个不停\n[01:44.880]\n[01:47.122]“夕阳余光，是淡淡的紫红色。”\n[02:06.876]\n[02:09.872]又在雨天想起你\n[02:14.374]呼啸的风里\n[02:17.627]对话着自己\n[02:22.875]沉默刻画着身影\n[02:27.622]慢慢的靠近\n[02:30.875]却又看不清\n[02:35.876]一个人看了多少风景\n[02:40.379]原来不仅仅错过了四季\n[02:48.880]如果有天迷失繁星里\n[02:53.371]环绕着星系为找寻到你\n[03:01.871]爱你是一半的电影\n[03:06.373]放映再清晰\n[03:09.370]看不到你身影\n[03:14.630]再见是落幕的心情\n[03:19.376]回忆是分镜\n[03:22.629]在梦中转个不停\n[03:27.876]我们终究会变成过去\n[03:34.373]慢慢再慢慢淡去\n[03:40.880]遗憾是会有人代替\n[03:47.376]天晴再刮风然后下雨\n[03:53.872]天晴再刮风然后下雨\n[03:58.129]\n[03:58.629]“一半的故事，一半的电影。”
    
14. `;
    
15.   var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz5.js?v1';
    
16.   loadJs(jsFile, tzInit);
    
17. 
    
18.   function loadJs(url, callback) {
    
19.     const script = document.createElement('script');
    
20.     script.charset = 'utf-8';
    
21.     script.src = url;
    
22.     script.defer = true;
    
23.     script.onload = callback;
    
24.     document.head.appendChild(script);
    
25.   }
    
26. 
    
27.   function tzInit() {
    
28.     var tz = TZ('pa');
    
29.     tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=1466931823' });
    
30.     tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2418175/00/18/94/5ef7ff6eaa213.mp4' });
    
31.     tz.add('img', '', 'ma', { src: 'https://638183.freep.cn/638183/small/hxdo.png' }).style('bottom: 40px;').playmp3();
    
32.     tz.bgprog().style('bottom: 20px; color: #fefefe; width: 240px;');
    
33.     tz.lrc(tz.lrc2HC(gc), '', true).style('top: 20px; writing-mode: vertical-lr; text-orientation: upright;');
    
34.     tz.fs().style('left: 20px; top: 20px;');
    
35.     tz.autoMid();
    
36.   }
    
37. </script>

复制代码

马黑黑

帖子背景：

        使用 .pa {} 选择器的线性渐变背景 + ::before 和 ::after 两个伪元素制作而成，相关代码在 03~05 行。

小播、进度条和全屏按钮：

        全系自显示、隐身。

        帖子使用高能电饭煲生成可用代码后，将 CSS文档 和 JS 文档地址分别改为 02 行 和 15 行的地址就可使用显示隐身功能。

杨帆

效果奇特，还会自掩，谢谢马老师精彩分享

小九

一半的一半，皆是生活的乐章

马黑黑

小九 发表于 2026-3-19 19:02
一半的一半，皆是生活的乐章

说的太好了！点三十二个赞

马黑黑

杨帆 发表于 2026-3-19 18:49
效果奇特，还会自掩，谢谢马老师精彩分享