【漫步特效】一直很安静

素心

这个难不难呀？

云端漫步

素心 发表于 2025-12-13 19:25
这个难不难呀？

不难，你试下，我代码给你，只要做好图后生成视频，代码内没图片，只两视频，上面个做好的视频链，下面个熊猫视频链。
下面https://644220.freep.cn/644220/aa/qww_134099268517175000.png图是标题。

1. <style>
   
2. #mydiv {
   
3.     margin: 130px 0 30px calc(50% - 800px);
   
4.     display: grid;
   
5.     place-items: center;
   
6.     width: 1700px;
   
7.     height: 890px;
   
8.     box-shadow: 3px 3px 20px #000;
   
9.     user-select: none;
   
10.     overflow: hidden;
    
11.     position: relative;
    
12.     z-index: 1;
    
13. }
    
14. #bg-vid {
    
15.     position: absolute;
    
16.     top: 0;
    
17.     left: 0;
    
18.     width: 100%;
    
19.     height: 100%;
    
20.     object-fit: cover;
    
21.     pointer-events: none;
    
22.     z-index: 0;
    
23. }
    
24. #vid {
    
25.     position: absolute;
    
26.     width: 130%;
    
27.     height: 130%;
    
28.     object-fit: cover;
    
29.     pointer-events: none;
    
30.     mix-blend-mode: screen;
    
31.     mask: linear-gradient(to top right, red 88%, transparent 0);
    
32.     z-index: 6;
    
33.     opacity: .45;
    
34. }
    
35. #character-img {
    
36.     position: absolute;
    
37.     width: 100%;
    
38.     height: 100%;
    
39.     object-fit: cover;
    
40.     pointer-events: none;
    
41.     z-index: 10;
    
42. }
    
43. #top-gif {
    
44.     position: absolute;
    
45.     top: 40px;
    
46.     left: 20%;
    
47.     width: 300px;
    
48.     height: auto;
    
49.     z-index: 20;
    
50.     pointer-events: none;
    
51. }
    
52. </style>
    
53. 
    
54. <div id="mydiv">
    
55.     <img id="top-gif" src="https://644220.freep.cn/644220/aa/wqe.gif">
    
56.     <video id="bg-vid" src="https://i.uik.cc/view.php/41c7085fc6e4d920523ee7b41f6b882c.mp4" autoplay loop muted playsinline></video>
    
57.     <audio id="aud" src="https://ting8.yymp3.com/yymp3/01cn/04new/asang2/008.mp3" autoplay loop></audio>
    
58.     <video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/82/37/60eb73f1550f4.mp4" autoplay loop muted></video>
    
59.     <img id="character-img" src="https://644220.freep.cn/644220/aa/qww_134099268517175000.png">
    
60. </div>

复制代码

素心

云端漫步 发表于 2025-12-13 19:45
不难，你试下，我代码给你，只要做好图后生成视频，代码内没图片，只两视频，上面个做好的视频链，下面个 ...

艾玛，早看到就好了，还自己找源代码呢，不好太麻烦同学了，同学毕竟是课代表

云端漫步

素心 发表于 2025-12-13 20:29
艾玛，早看到就好了，还自己找源代码呢，不好太麻烦同学了，同学毕竟是课代表 ...

咋了，对我来说不麻烦，玩玩找个乐趣

令狐冲

云端漫步 发表于 2025-12-13 18:53
谢谢狐冲版临帖支持。哈哈換了个新鲜玩法，将图溶合制作视频，代码内没图片的。 ...

有新意。。。

花简静

我的天哪，这个连人都是动画的了。。头一次看到这样连主图都是动画的音画作品，云端老师你真是太让人惊喜了

花简静

仔细看看只有标题是纹丝不动的，哈哈，还有背景渲染也若隐若现，这构思和技术真是叫绝。。