大海啊故乡

凡哥

凡哥

帖子代码：

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>

复制代码

凡哥

帖子背景效果使用 纯CSS 营造，核心在于 background 属性的多重背景设置（图像背景+线型渐变+背景混合）。

当然，ps做出的效果会更专业、经典。CSS重在灵活，可以对静态图像进行动态修饰。

令狐冲

代码专业，画面漂亮
飘洒的动态粒子
像爱洒满整个人间
大海啊故乡
一首动听的轻音乐
凡哥周日快乐。。。

雨声

问好凡哥，欣赏凡哥带来的精美作品~

雨声

祝凡哥春日安好~