【漫步特效】躁动 探寻的青春/ 一张图片四季变色效果

云端漫步

云端漫步

云端漫步

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>  

复制代码

春华秋实

特效加持，神奇的变化过程

欧阳风刀

一图跨越四季的视觉过程，这个效果精彩。

欧阳风刀

感谢哥们分享！

玫の玫

欣赏漫步老师美作来了，
绿意晕染的天地间，
她似在漂浮，
发丝与衣袂轻扬。
把繁花、
绿叶与她的姿态，
串成关于成长与奔赴的诗，
满是朝气。

玫の玫

绿色的梦乡里，
她发丝飘，
衣袂摇。
让繁花与绿叶，
都成了青春的见证者，
她的每一寸舒展，
都在诉说 “以探索为名，赴青春之约” 的美好。
感谢老师美作分享！

圊圊淥詶

感觉特效变色真的好神奇，美美的效果，尽现眼前，好看~~

圊圊淥詶

谢谢漫步老师分享，晚上好~~