【漫步特效】梦幻诛仙-致:素心同学

云端漫步

云端漫步

@素心 热烈欢迎素心同学，登场必须整整齐齐列队相迎， 这特效刚制好致素心。

素心

哎呀，这个也太好看了，终于又能看到漫步同学的特效了，

绿蔷薇

一幅抒情的古风特效音画
叠影双人设计突出仙侠恋爱叙事
水墨卷轴背景烘托唯美的古典意境~~

素心

场景切换的如此灵动自然，让人又有了学习的乐趣，

绿蔷薇

漫步老师制作漂亮，同祝素心同学收礼开心~~

素心

这绝对是大制作了，六幅图联袂，古风古韵，既有江湖的豪情，还带着特有的书卷气，看上去荡气回肠巧夺天工呀
这大礼，我必须趴在电脑上细细看来哈

云端漫步

绿蔷薇 发表于 2026-6-26 21:13
一幅抒情的古风特效音画
叠影双人设计突出仙侠恋爱叙事
水墨卷轴背景烘托唯美的古典意境~~ ...

蔷薇晚上好，刚制好这特效欢迎素心同学来贵坛玩多多关照哦。

云端漫步

素心 发表于 2026-6-26 21:13
场景切换的如此灵动自然，让人又有了学习的乐趣，

刚制好这特效欢迎素心同学来这玩，有兴趣五张图代码我给你

1. <style>
   
2. #mydiv {
   
3.     margin: 130px 0 30px calc(50% - 900px);
   
4.     display: grid;
   
5.     place-items: center;
   
6.     width: 1700px;
   
7.     height: 850px;
   
8.     background: lightblue url('https://644220.freep.cn/644220/4/301.jpg') no-repeat center/cover;
   
9.     box-shadow: 3px 3px 20px #000;
   
10.     user-select: none;
    
11.     overflow: hidden;
    
12.     position: relative;
    
13.     z-index: 1;  
    
14. }
    
15. #vid {
    
16.     position: absolute;
    
17.     width: 130%;
    
18.     height: 130%;
    
19.     object-fit: cover;
    
20.     pointer-events: none;
    
21.     mix-blend-mode: screen;
    
22.     mask: linear-gradient(to top right, red 88%, transparent 0);   
    
23.     -webkit-mask: linear-gradient(to top right, red 88%, transparent 0);   
    
24.     z-index: 6;
    
25.     opacity: .40;
    
26. }
    
27. #mydiv .img-slider {
    
28.     position: absolute;
    
29.     top: 0;
    
30.     left: 0;
    
31.     width: 100%;
    
32.     height: 100%;
    
33.     z-index: 2;
    
34. }
    
35. #mydiv .img-slider img {
    
36.     position: absolute;
    
37.     top: 0;
    
38.     left: 0;
    
39.     width: 1700px;
    
40.     height: 850px;
    
41.     object-fit: cover;
    
42.     opacity: 0;
    
43.     animation: imgSlider 60s linear infinite;
    
44. }
    
45. @keyframes imgSlider {
    
46.     0% { opacity: 1; transform: scale(1); z-index: 5; }
    
47.     5% { opacity: 0; transform: scale(1.1); z-index: 2; }
    
48.   
    
49.     10% { opacity: 1; transform: translateX(0); z-index: 5; }
    
50.     15% { opacity: 0; transform: translateX(-100%); z-index: 2; }
    
51. 
    
52.     20% { opacity: 1; transform: translateX(0); z-index: 5; }
    
53.     25% { opacity: 0; transform: translateX(100%); z-index: 2; }
    
54. 
    
55.     30% { opacity: 1; transform: translateY(0); z-index: 5; }
    
56.     35% { opacity: 0; transform: translateY(-100%); z-index: 2; }
    
57. 
    
58.     40% { opacity: 1; transform: translateY(0); z-index: 5; }
    
59.     45% { opacity: 0; transform: translateY(100%); z-index: 2; }
    
60. 
    
61.     50% { opacity: 1; transform: rotate(0deg) scale(1); z-index: 5; }
    
62.     55% { opacity: 0; transform: rotate(10deg) scale(0.9); z-index: 2; }
    
63. 
    
64.     60% { opacity: 1; filter: blur(0); z-index: 5; }
    
65.     65% { opacity: 0; filter: blur(10px); z-index: 2; }
    
66. 
    
67.     70% { opacity: 1; filter: brightness(1); z-index: 5; }
    
68.     75% { opacity: 0; filter: brightness(0); z-index: 2; }
    
69. 
    
70.     80% { opacity: 1; transform: rotateY(0deg); z-index: 5; }
    
71.     85% { opacity: 0; transform: rotateY(180deg); z-index: 2; }
    
72. 
    
73.     90% { opacity: 1; clip-path: inset(0 0 0 0); z-index: 5; }
    
74.     95% { opacity: 0; clip-path: inset(50% 0 50% 0); z-index: 2; }
    
75.    
    
76.     100% { opacity: 1; transform: scale(1); z-index: 5; }
    
77. }
    
78. #mydiv .img-slider img:nth-child(1) { animation-delay: 0s; }
    
79. #mydiv .img-slider img:nth-child(2) { animation-delay: 30s; }
    
80. #mydiv .img-slider img:nth-child(3) { animation-delay: 60s; }
    
81. #mydiv .img-slider img:nth-child(4) { animation-delay: 90s; }
    
82. #mydiv .img-slider img:nth-child(5) { animation-delay: 120s; }
    
83. #top-png {
    
84.     position: absolute;
    
85.     top: 0;
    
86.     left: 0;
    
87.     width: 1700px;   
    
88.     height: 850px;  
    
89.     object-fit: cover;
    
90.     z-index: 999;   
    
91.     pointer-events: none;
    
92. }
    
93. </style>
    
94.   
    
95. <div id="mydiv">
    
96.     <img id="top-png" src="https://644220.freep.cn/644220/4/398.png">
    
97. 
    
98.     <audio id="aud" src="https://mp3.joy127.com/music/12898.mp3" autoplay loop></audio>
    
99.     <video id="vid" src="https://img2.tukuppt.com/video_show/3664703/00/01/99/5b4eba60cc57c.mp4" autoplay="" loop="" muted=""></video>
    
100.     <div class="img-slider">
     
101.         <img src="https://644220.freep.cn/644220/4/301.jpg">
     
102.         <img src="https://644220.freep.cn/644220/4/302.jpg">
     
103.         <img src="https://644220.freep.cn/644220/4/303.jpg">
     
104.         <img src="https://644220.freep.cn/644220/4/304.jpg">
     
105.         <img src="https://644220.freep.cn/644220/4/305.jpg">
     
106.     </div>
     
107. </div>

复制代码

云端漫步

素心 发表于 2026-6-26 21:17
这绝对是大制作了，六幅图联袂，古风古韵，既有江湖的豪情，还带着特有的书卷气，看上去荡气回肠巧夺天工呀 ...

哈啥我晚上空了找些图玩玩特效，这人物在电脑里有二十多年了