大海啊故乡

马黑黑

马黑黑

帖子代码

1. <style>
   
2.   @import 'https://638183.freep.cn/638183/tzmaker/tz5.css';
   
3.   .pa {
   
4.     --ma-size: 5%;
   
5.     --bg:
   
6.       url('https://638183.freep.cn/638183/t24/w8/dahd.webp') no-repeat center/cover,
   
7.       linear-gradient(30deg,
   
8.         rgba(255,0,0,.8),
   
9.         rgba(255,0,0,.8) 20%,
   
10.         transparent 25%,
    
11.         transparent 80%,
    
12.         rgba(255,0,0,.8) 95%,
    
13.         rgba(255,0,0,.8) 0),
    
14.       linear-gradient(150deg,
    
15.         rgba(255,0,0,.8),
    
16.         rgba(255,0,0,.8) 5%,
    
17.         transparent 20%,
    
18.         transparent 75%,
    
19.         rgba(255,0,0,.8) 95%,
    
20.         rgba(255,0,0,.8) 0),
    
21.       #222
    
22.     ;
    
23.     background-blend-mode: difference;
    
24.     z-index: 666;
    
25.   }
    
26.   .pd-vid { opacity: 1; mix-blend-mode: screen; }
    
27. </style>
    
28. 
    
29. <div class="pa"></div>
    
30. 
    
31. <script>
    
32.   var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz5.js';
    
33.   loadJs(jsFile, tzInit);
    
34. 
    
35.   function loadJs(url, callback) {
    
36.     const script = document.createElement('script');
    
37.     script.charset = 'utf-8';
    
38.     script.src = url;
    
39.     script.defer = true;
    
40.     script.onload = callback;
    
41.     document.head.appendChild(script);
    
42.   }
    
43. 
    
44.   function tzInit() {
    
45.     var tz = TZ('pa');
    
46.     tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2139675707' });
    
47.     tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2418175/00/02/34/5b56d36556d75.mp4'});
    
48.     tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bba05658f4.mp4'});
    
49.     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();
    
50.     tz.bgprog().style('bottom: 20px; color: cyan;');
    
51.     tz.fs().style('right: 20px; bottom: 20px;');
    
52.     tz.autoMid();
    
53.   }
    
54. </script>

复制代码

马黑黑

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

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

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

马黑黑

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

小辣椒

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

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

小辣椒

发现现在黑黑找图的技术有进步，找的图图漂亮

梦油

海面波光粼粼，美丽极了。&#8204;