【素。学图--眼皮闪动】或许，你是晚开的花。

素心

上古呆瓜 发表于 2025-11-5 10:54
艾玛呀，素爷也太厉害了吧
这大眼睛忽闪忽闪的，这大图布灵布灵的
光韵揉合着一抹秋色，艺术感满满

艾玛，这是啥风给上古呆给吹来了，你是来吃瓜的吧，哈哈，那花儿，我也觉得有点眼熟呢

素心

上古呆瓜 发表于 2025-11-5 10:56
如果眼里进沙子了，你跟我说
我帮你吹吹

艾玛，你再给我吹伤风了，我说我咋有点咳嗽呢

素心

轻舞若芸 发表于 2025-11-5 11:00
素心学的真棒。
整体设计像是在讲一个关于成长时差的暖心故事，
既有视觉上的舒适感，又有情感上的治愈力， ...

感谢轻舞的鼓励，一起玩图快乐哈

云端漫步

素心同学做个图，换背景与人物就行，人物扣出时将人物透明度降到80，输出人物png图，代码內去掉中文字。
  // 扩大色相随机范围，增加颜色多样性 // 红色系，等。

1. <style>
   
2. #mydiv {
   
3.     margin: 130px 0 30px calc(50% - 700px);
   
4.     width: 1700px;
   
5.     height: 850px;
   
6.     position: relative;
   
7.     z-index: 3;
   
8.     overflow: hidden;
   
9.     user-select: none;
   
10.     box-shadow: 3px 3px 20px #000;
    
11.     background: lightblue url('https://kkshan.com/data/attachment/forum/202511/03/144051xy94hs36n53z3ycb.jpg') no-repeat center/cover;
    
12.     display: grid;
    
13.     place-items: center;
    
14. }
    
15. #vid1, #vid2 {
    
16.     position: absolute;
    
17.     width: 100%;
    
18.     object-fit: cover;
    
19.     pointer-events: none;
    
20. }
    
21. #vid1 {
    
22.     height: 110%;
    
23.     top: -80px;
    
24.     mix-blend-mode: screen;
    
25.     z-index: 2.5;
    
26.     opacity: 0.2;
    
27. }
    
28. #vid2 {
    
29.     height: 100%;
    
30.     mix-blend-mode: luminosity;
    
31.     -webkit-mask: linear-gradient(to bottom, transparent, transparent, transparent, red);
    
32.     z-index: 2;
    
33.     opacity: 0.95;
    
34. }
    
35. #overlay-png {
    
36.     position: relative;
    
37.     z-index: 5;
    
38. }
    
39. .rain-bubble {
    
40.     position: absolute;
    
41.     top: 850px;
    
42.     border-radius: 50%;
    
43.     pointer-events: none;
    
44.     z-index: 3;
    
45.     mix-blend-mode: screen;
    
46. }
    
47. @keyframes rise {
    
48.     from { transform: translateY(0); opacity: 0.5; }
    
49.     to { transform: translateY(-900px); opacity: 0.7; }
    
50. }
    
51. </style>   
    
52. 
    
53. <div id="mydiv">
    
54.     <div id="clouds-container"></div>
    
55.     <div id="bubble-container"></div>
    
56.     <img id="overlay-png" src="https://s21.ax1x.com/2025/11/03/pZSAHUK.png" onerror="this.style.display='none';">
    
57.     <video id="vid1" src="https://img.tukuppt.com/video_show/2418175/00/01/46/5b438926d8d48.mp4" autoplay loop muted></video>
    
58.     <video id="vid2" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b492fae7af99.mp4" autoplay loop muted></video>
    
59.     <audio id="aud" src="https://ting8.yymp3.com/new8/chenying2/5.mp3" autoplay loop></audio>
    
60. </div>
    
61. <br><br><br><br><br><br><br><br>
    
62. 
    
63. <script>
    
64. window.addEventListener('load', () => {
    
65.     const container = document.getElementById('mydiv');
    
66.     if (!container) return;
    
67. 
    
68.     const width = 1700;
    
69.     // 增加更多基础色相（涵盖红、橙、黄、绿、蓝、紫、粉等）
    
70.     const hues = [
    
71.         {h: 0, s: 60},    // 红色系
    
72.         {h: 30, s: 70},   // 橙色系
    
73.         {h: 60, s: 65},   // 黄色系
    
74.         {h: 120, s: 50},  // 绿色系
    
75.         {h: 180, s: 60},  // 青色系
    
76.         {h: 240, s: 65},  // 蓝色系
    
77.         {h: 270, s: 60},  // 紫色系
    
78.         {h: 330, s: 70},  // 粉色系
    
79.         {h: 300, s: 55},  // 玫红色系
    
80.         {h: 90, s: 60}    // 黄绿色系
    
81.     ];
    
82. 
    
83.     const getColor = () => {
    
84.         const base = hues[Math.floor(Math.random() * hues.length)];
    
85.         // 扩大色相随机范围（±40度），增加颜色多样性
    
86.         const hue = base.h + (Math.random() - 0.5) * 40;
    
87.         // 饱和度随机范围扩大（±20%）
    
88.         const saturation = base.s + (Math.random() - 0.5) * 20;
    
89.         // 亮度范围调整（70%-95%），增加明暗对比
    
90.         const lightness = 70 + Math.random() * 25;
    
91.         // 透明度范围扩大（0.2-0.5）
    
92.         const alpha = 0.2 + Math.random() * 0.3;
    
93.         // 光斑位置随机范围扩大，增强光影变化
    
94.         const pos = `${10 + Math.random() * 80}% ${10 + Math.random() * 80}%`;
    
95.         
    
96.         return {
    
97.             background: `radial-gradient(circle at ${pos},
    
98.                 hsla(${hue}, ${saturation}%, ${lightness + 15}%, ${alpha * 0.7}),
    
99.                 hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha * 0.9}) 60%,
    
100.                 hsla(${hue}, ${saturation}%, ${lightness - 10}%, ${alpha}))`,
     
101.             border: `1px solid hsla(${hue}, ${saturation}%, ${lightness + 20}%, ${alpha * 0.9})`,
     
102.             boxShadow: `0 0 10px hsla(${hue}, ${saturation}%, ${lightness + 25}%, ${alpha * 0.8})`
     
103.         };
     
104.     };
     
105. 
     
106.     const createBubble = () => {
     
107.         const bubble = document.createElement('div');
     
108.         bubble.className = 'rain-bubble';
     
109.         const size = Math.random() * 6 + 4;
     
110.         
     
111.         bubble.style.width = `${size}px`;
     
112.         bubble.style.height = `${size}px`;
     
113.         bubble.style.left = `${Math.random() * width}px`;
     
114.         
     
115.         const color = getColor();
     
116.         Object.assign(bubble.style, {
     
117.             background: color.background,
     
118.             border: color.border,
     
119.             boxShadow: color.boxShadow
     
120.         });
     
121.         
     
122.         const sway = (Math.random() - 0.5) * 30;
     
123.         const duration = 7 + Math.random() * 7;
     
124.         
     
125.         bubble.style.transform = `translateX(${sway/2}px)`;
     
126.         bubble.style.animation = `rise ${duration}s linear forwards`;
     
127.         
     
128.         container.appendChild(bubble);
     
129.         setTimeout(() => bubble.remove(), duration * 1000);
     
130.     };
     
131. 
     
132.     for (let i = 0; i < 50; i++) {
     
133.         setTimeout(createBubble, i * 100);
     
134.     }
     
135.     setInterval(createBubble, 80);
     
136. });
     
137. </script>

复制代码

雨声

素心 发表于 2025-11-4 20:55
我好像都傻了，图都弄到传图那版块去了

素爷，学的挺快，赞一个~

雨声

艾玛，看见代码都晕呼的我，真心佩服我家素爷~

花简静

这背景渲染的真是太漂亮了。。。
一朵花通过径向渐变形成这样的梦幻之感，这构思真是太绝了。。
特效的光点与背景完美结合
仔细看看整个画面在不停变色。。
美女眼睛会眨，这技术真是学到家了。。
人物素材是叠加在背景上的，完全受特效影响，好棒的效果。。

花简静

这技术真是太厉害了。。恭喜素宝解锁新技能

清梦

心姐这图真美，我喜欢~

清梦

欣赏心姐带来的精美作品~