论坛 › 动画音画 › 一半的电影

马黑黑 发表于 2026-3-19 18:06

一半的电影

<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz5.css';
.pa { --bg: linear-gradient(black, darkred, red); --ma-size: 8%; }
.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; }
.pa::after { left: calc(50% + 2px); transform: scale(-1,1); mix-blend-mode: screen; }
.pd-vid { opacity: 1; mix-blend-mode: screen; }
</style>

<div class="pa"></div>

<script>
var gc = `
编曲：J.well\n混音：J.well\n\n“天上有一朵云，和你笑的时候一样美。”\n\n旧记忆里关于你\n空缺的日记\n我们的剧情\n只剩陌生的自己\n一半的梦里\n未知的结局\n一路走过空白的风景\n原来还在意你的消息\n一路上触碰旧的回忆\n无法忘记残存在心里\n爱你是一半的电影\n放映再清晰\n看不到你身影\n再见是落幕的心情\n回忆是分镜\n在梦中转个不停\n\n“夕阳余光，是淡淡的紫红色。”\n\n又在雨天想起你\n呼啸的风里\n对话着自己\n沉默刻画着身影\n慢慢的靠近\n却又看不清\n一个人看了多少风景\n原来不仅仅错过了四季\n如果有天迷失繁星里\n环绕着星系为找寻到你\n爱你是一半的电影\n放映再清晰\n看不到你身影\n再见是落幕的心情\n回忆是分镜\n在梦中转个不停\n我们终究会变成过去\n慢慢再慢慢淡去\n遗憾是会有人代替\n天晴再刮风然后下雨\n天晴再刮风然后下雨\n\n“一半的故事，一半的电影。”
`;
var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz5.js?v1';
loadJs(jsFile, tzInit);

function loadJs(url, callback) {
    const script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.defer = true;
    script.onload = callback;
    document.head.appendChild(script);
}

function tzInit() {
    var tz = TZ('pa');
    tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=1466931823' });
    tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2418175/00/18/94/5ef7ff6eaa213.mp4' });
    tz.add('img', '', 'ma', { src: 'https://638183.freep.cn/638183/small/hxdo.png' }).style('bottom: 40px;').playmp3();
    tz.bgprog().style('bottom: 20px; color: #fefefe; width: 240px;');
    tz.lrc(tz.lrc2HC(gc), '', true).style('top: 20px; writing-mode: vertical-lr; text-orientation: upright;');
    tz.fs().style('left: 20px; top: 20px;');
    tz.autoMid();
}
</script>

马黑黑 发表于 2026-3-19 18:06

帖子代码：
<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz5.css';
.pa { --bg: linear-gradient(black, darkred, red); --ma-size: 8%; }
.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; }
.pa::after { left: calc(50% + 2px); transform: scale(-1,1); mix-blend-mode: screen; }
.pd-vid { opacity: 1; mix-blend-mode: screen; }
</style>

<div class="pa"></div>

<script>
var gc = `
编曲：J.well\n混音：J.well\n\n“天上有一朵云，和你笑的时候一样美。”\n\n旧记忆里关于你\n空缺的日记\n我们的剧情\n只剩陌生的自己\n一半的梦里\n未知的结局\n一路走过空白的风景\n原来还在意你的消息\n一路上触碰旧的回忆\n无法忘记残存在心里\n爱你是一半的电影\n放映再清晰\n看不到你身影\n再见是落幕的心情\n回忆是分镜\n在梦中转个不停\n\n“夕阳余光，是淡淡的紫红色。”\n\n又在雨天想起你\n呼啸的风里\n对话着自己\n沉默刻画着身影\n慢慢的靠近\n却又看不清\n一个人看了多少风景\n原来不仅仅错过了四季\n如果有天迷失繁星里\n环绕着星系为找寻到你\n爱你是一半的电影\n放映再清晰\n看不到你身影\n再见是落幕的心情\n回忆是分镜\n在梦中转个不停\n我们终究会变成过去\n慢慢再慢慢淡去\n遗憾是会有人代替\n天晴再刮风然后下雨\n天晴再刮风然后下雨\n\n“一半的故事，一半的电影。”
`;
var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz5.js?v1';
loadJs(jsFile, tzInit);

function loadJs(url, callback) {
    const script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.defer = true;
    script.onload = callback;
    document.head.appendChild(script);
}

function tzInit() {
    var tz = TZ('pa');
    tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=1466931823' });
    tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2418175/00/18/94/5ef7ff6eaa213.mp4' });
    tz.add('img', '', 'ma', { src: 'https://638183.freep.cn/638183/small/hxdo.png' }).style('bottom: 40px;').playmp3();
    tz.bgprog().style('bottom: 20px; color: #fefefe; width: 240px;');
    tz.lrc(tz.lrc2HC(gc), '', true).style('top: 20px; writing-mode: vertical-lr; text-orientation: upright;');
    tz.fs().style('left: 20px; top: 20px;');
    tz.autoMid();
}
</script>

马黑黑 发表于 2026-3-19 18:12

帖子背景：

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

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

      全系自显示、隐身。

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

杨帆 发表于 2026-3-19 18:49

效果奇特，还会自掩，谢谢马老师精彩分享{:4_191:}

小九 发表于 2026-3-19 19:02

一半的一半，皆是生活的乐章{:4_199:}{:4_190:}

马黑黑 发表于 2026-3-19 19:56

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

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

马黑黑 发表于 2026-3-19 19:56

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

{:4_191:}

红影 发表于 2026-3-19 22:34

这样的镜射效果真不错，欣赏黑黑好帖{:4_187:}

马黑黑 发表于 2026-3-19 22:48

红影 发表于 2026-3-19 22:34
这样的镜射效果真不错，欣赏黑黑好帖

有点可怕：像是连体来着{:4_170:}

红影 发表于 2026-3-21 18:01

马黑黑 发表于 2026-3-19 22:48
有点可怕：像是连体来着

这么奇妙，有什么可怕啊{:4_173:}

马黑黑 发表于 2026-3-21 19:55

红影 发表于 2026-3-21 18:01
这么奇妙，有什么可怕啊

嗯，如果没有这种感觉就好

红影 发表于 2026-3-21 21:12

马黑黑 发表于 2026-3-21 19:55
嗯，如果没有这种感觉就好

没有连体感觉，却是有种对称美呢。

马黑黑 发表于 2026-3-21 22:41

红影 发表于 2026-3-21 21:12
没有连体感觉，却是有种对称美呢。

那就好

红影 发表于 2026-3-22 17:02

马黑黑 发表于 2026-3-21 22:41
那就好

非常好，非常漂亮{:4_187:}

马黑黑 发表于 2026-3-22 18:08

红影 发表于 2026-3-22 17:02
非常好，非常漂亮

那就更好

红影 发表于 2026-3-22 21:33

马黑黑 发表于 2026-3-22 18:08
那就更好

那是当然{:4_187:}

马黑黑 发表于 2026-3-23 08:26

红影 发表于 2026-3-22 21:33
那是当然

也很自然

红影 发表于 2026-3-23 22:19

马黑黑 发表于 2026-3-23 08:26
也很自然

自然的都是好的{:4_187:}

马黑黑 发表于 2026-3-23 23:06

红影 发表于 2026-3-23 22:19
自然的都是好的

好的基本也都是自然的

红影 发表于 2026-3-26 20:38

马黑黑 发表于 2026-3-23 23:06
好的基本也都是自然的

这两者是相互的。

查看完整版本: 一半的电影