马黑黑 发表于 2026-3-20 18:39

大海啊故乡

<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz5.css';
.pa {
    --ma-size: 5%;
    --bg:
      url('https://638183.freep.cn/638183/t24/w8/dahd.webp') no-repeat center/cover,
      linear-gradient(30deg,
      rgba(255,0,0,.8),
      rgba(255,0,0,.8) 20%,
      transparent 25%,
      transparent 80%,
      rgba(255,0,0,.8) 95%,
      rgba(255,0,0,.8) 0),
      linear-gradient(150deg,
      rgba(255,0,0,.8),
      rgba(255,0,0,.8) 5%,
      transparent 20%,
      transparent 75%,
      rgba(255,0,0,.8) 95%,
      rgba(255,0,0,.8) 0),
      #222
    ;
    background-blend-mode: difference;
    z-index: 666;
}
.pd-vid { opacity: 1; mix-blend-mode: screen; }
</style>

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

<script>
var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz5.js';
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=2139675707' });
    tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2418175/00/02/34/5b56d36556d75.mp4'});
    tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bba05658f4.mp4'});
    tz.add('img', '', 'ma', { src: 'https://638183.freep.cn/638183/small/2026/aa1.webp' }).style('bottom: 40px; border-radius: 50%; mix-blend-mode: multiply').playmp3();
    tz.bgprog().style('bottom: 20px; color: cyan;');
    tz.fs().style('right: 20px; bottom: 20px;');
    tz.autoMid();
}
</script>

马黑黑 发表于 2026-3-20 18:40

帖子代码

<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz5.css';
.pa {
    --ma-size: 5%;
    --bg:
      url('https://638183.freep.cn/638183/t24/w8/dahd.webp') no-repeat center/cover,
      linear-gradient(30deg,
      rgba(255,0,0,.8),
      rgba(255,0,0,.8) 20%,
      transparent 25%,
      transparent 80%,
      rgba(255,0,0,.8) 95%,
      rgba(255,0,0,.8) 0),
      linear-gradient(150deg,
      rgba(255,0,0,.8),
      rgba(255,0,0,.8) 5%,
      transparent 20%,
      transparent 75%,
      rgba(255,0,0,.8) 95%,
      rgba(255,0,0,.8) 0),
      #222
    ;
    background-blend-mode: difference;
    z-index: 666;
}
.pd-vid { opacity: 1; mix-blend-mode: screen; }
</style>

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

<script>
var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz5.js';
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=2139675707' });
    tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2418175/00/02/34/5b56d36556d75.mp4'});
    tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bba05658f4.mp4'});
    tz.add('img', '', 'ma', { src: 'https://638183.freep.cn/638183/small/2026/aa1.webp' }).style('bottom: 40px; border-radius: 50%; mix-blend-mode: multiply').playmp3();
    tz.bgprog().style('bottom: 20px; color: cyan;');
    tz.fs().style('right: 20px; bottom: 20px;');
    tz.autoMid();
}
</script>

马黑黑 发表于 2026-3-20 18:47

本帖使用了两个视频叠加，EDGE浏览器下，如果启用了“增强视频”功能，且设备的显卡性能偏低，帖子的渲染效果可能不佳。原因是EDGE浏览器的“增强视频”会消耗很大的本地显卡算力。

低端显卡的设备不建议开启“增强视频”功能。关闭入口：

设置 → 系统和性能 → 系统 → 增强视频

马黑黑 发表于 2026-3-20 20:30

背景设计原理请参阅：纯CSS背景设计思路：图片+渐变叠加+混合模式 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

小辣椒 发表于 2026-3-20 20:51

马黑黑 发表于 2026-3-20 18:47
本帖使用了两个视频叠加，EDGE浏览器下，如果启用了“增强视频”功能，且设备的显卡性能偏低，帖子的渲染效 ...

效果很惊艳，只是小辣椒玩不了，我的弟兄们视频手机看不见，郁闷的

小辣椒 发表于 2026-3-20 20:51

发现现在黑黑找图的技术有进步，找的图图漂亮{:4_170:}

梦油 发表于 2026-3-20 21:07

海面波光粼粼，美丽极了。‌

红影 发表于 2026-3-20 21:40

我自己都不知道浏览器是否开了视频增强，不过这帖子很漂亮啊。
选取的图片和音乐内涵很相符，欣赏黑黑好帖{:4_187:}

马黑黑 发表于 2026-3-20 22:04

梦油 发表于 2026-3-20 21:07
海面波光粼粼，美丽极了。‌

晚上好{:4_191:}

马黑黑 发表于 2026-3-20 22:05

小辣椒 发表于 2026-3-20 20:51
效果很惊艳，只是小辣椒玩不了，我的弟兄们视频手机看不见，郁闷的

按理不应该酱紫的。我用的老人机都能看

马黑黑 发表于 2026-3-20 22:05

小辣椒 发表于 2026-3-20 20:51
发现现在黑黑找图的技术有进步，找的图图漂亮

还行还行

马黑黑 发表于 2026-3-20 22:05

红影 发表于 2026-3-20 21:40
我自己都不知道浏览器是否开了视频增强，不过这帖子很漂亮啊。
选取的图片和音乐内涵很相符，欣赏黑黑好帖 ...

机器性能好的啥事都木有

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

马黑黑 发表于 2026-3-20 22:05
机器性能好的啥事都木有

我也不知道好坏，反正能玩{:4_173:}

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

红影 发表于 2026-3-21 18:14
我也不知道好坏，反正能玩

你的机器配不低的

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

马黑黑 发表于 2026-3-21 19:55
你的机器配不低的

可能吧，我自己也不清楚。

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

红影 发表于 2026-3-21 21:11
可能吧，我自己也不清楚。

我问过的，记得不错。

设置 → 系统 → 系统信息，那里有你需要了解的

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

马黑黑 发表于 2026-3-21 22:43
我问过的，记得不错。

设置 → 系统 → 系统信息，那里有你需要了解的

哦，知道了，谢谢黑黑{:4_187:}

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

红影 发表于 2026-3-22 17:08
哦，知道了，谢谢黑黑

阔气一下是应该的

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

马黑黑 发表于 2026-3-22 18:08
阔气一下是应该的

没必要啊，轻松自在多好啊。

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

红影 发表于 2026-3-22 21:30
没必要啊，轻松自在多好啊。

不阔气何来轻松
页: [1] 2
查看完整版本: 大海啊故乡