【漫步特效】躁动 探寻的青春/ 一张图片四季变色效果（七夕节快乐）

云端漫步

云端漫步

云端漫步

变色在FLASH软件中用时间轴逐帧动画中变色，现在大多数浏览器不支持FLASH插件，因此朋友
们看不到FLASH动画，此作品用CSS实现一张图片四季变色效果，分享大家可制一张图套用。

1. <style>
   
2. #mydiv {
   
3.     margin: 150px 0 30px calc(50% - 931px);
   
4.     display: grid;
   
5.     place-items: center;
   
6.     width: 1800px;
   
7.     height: 900px;
   
8.     background: lightblue url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/5/cvc.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.     animation: multiColorShift 20s infinite ease-in-out;
    
16. }
    
17. #vid {
    
18.     position: absolute;
    
19.     width: 100%;
    
20.     height: 100%;
    
21.     object-fit: cover;
    
22.     pointer-events: none;
    
23.     mix-blend-mode: screen;
    
24.     -webkit-mask: linear-gradient(to top right, red 92%, transparent 0);   
    
25.     z-index: 2;
    
26.     opacity: .45;
    
27. }
    
28. 
    
29. /* 定义多种颜色转换的动画 */
    
30. @keyframes multiColorShift {
    
31.     0% {
    
32.         filter: hue-rotate(0deg) saturate(1.2);
    
33.     }
    
34.     16% {
    
35.         filter: hue-rotate(60deg) saturate(1.3);
    
36.     }
    
37.     32% {
    
38.         filter: hue-rotate(120deg) saturate(1.2);
    
39.     }
    
40.     48% {
    
41.         filter: hue-rotate(180deg) saturate(1.4);
    
42.     }
    
43.     64% {
    
44.         filter: hue-rotate(240deg) saturate(1.2);
    
45.     }
    
46.     80% {
    
47.         filter: hue-rotate(300deg) saturate(1.3);
    
48.     }
    
49.     100% {
    
50.         filter: hue-rotate(360deg) saturate(1.2);
    
51.     }
    
52. }
    
53. </style>
    
54. 音乐代码
    
55. <div id="mydiv">
    
56.     <video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/42/5b42d8d01da76.mp4" autoplay="" loop="" muted=""></video>
    
57. </div>  

复制代码

云端漫步

@令狐冲@风晴雪@云笛@轻舞若芸@仟婳@雨声@愫怡@花简静@柒玥@清梦@泪红颜@醉美水芙蓉@向荣S@落字秋风@姚云裳@淥の詶@玫の玫

花简静

你真厉害啊，一图四季，无论是制图还是特效都顶级，膜拜一下

花简静

云端漫步 发表于 2025-8-25 19:44
@令狐冲@风晴雪@云笛@轻舞若芸@仟婳@雨声@愫怡@花简静@柒玥@清梦@泪红颜@醉美水芙蓉@向荣S@落字秋风@姚云裳 ...

这个作品要好好欣赏一下。。。。

花简静

第一次看到这种效果，这里用的是色相转换。。。

花简静

构图唯美，人物在树丛叶子中，绿意盎然。。。
随着色相变化颜色发生转变，形成一年四季不同的景象。。
这创意本身就很厉害，用代码实现它就更加厉害。。

花简静

排字又学到了，可以横一半或者竖一半不同色，或者旋转放置，中文英文穿插。变化产生层次感，漂亮。。

云端漫步

花简静 发表于 2025-8-25 19:57
你真厉害啊，一图四季，无论是制图还是特效都顶级，膜拜一下

在CSS3特效颜色替换："颜色替换" 通常指通过 CSS 技术修改元素的颜色呈现效果，主要用于改变元素的颜色状态（如 hover 效果）、调整图像颜色，或实现特定的视觉效果。这一概念涵盖了多种技术手段，常见的实现方式包括：基础颜色属性修改,滤镜（Filter）实现颜色替换,混合模式（Blend Modes）等。