网站首页 › ┫特效音画┣ › 【漫步特效】躁动 探寻的青春/ 一张图片四季变色效果

云端漫步 发表于 2025-8-27 14:12:54

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

<style>
#mydiv {
    margin: 150px 0 30px calc(50% - 931px);
    display: grid;
    place-items: center;
    width: 1800px;
    height: 900px;
    background: lightblue url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/5/cvc.jpg') no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    user-select: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* 添加多种颜色转换动画 */
    animation: multiColorShift 20s infinite ease-in-out;
}
#vid {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    -webkit-mask: linear-gradient(to top right, red 92%, transparent 0);   
    z-index: 2;
    opacity: .45;
}

/* 定义多种颜色转换的动画 */
@keyframes multiColorShift {
    0% {
      filter: hue-rotate(0deg) saturate(1.2);
    }
    16% {
      filter: hue-rotate(60deg) saturate(1.3);
    }
    32% {
      filter: hue-rotate(120deg) saturate(1.2);
    }
    48% {
      filter: hue-rotate(180deg) saturate(1.4);
    }
    64% {
      filter: hue-rotate(240deg) saturate(1.2);
    }
    80% {
      filter: hue-rotate(300deg) saturate(1.3);
    }
    100% {
      filter: hue-rotate(360deg) saturate(1.2);
    }
}
</style>

<div id="mydiv">
    <video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/42/5b42d8d01da76.mp4" autoplay="" loop="" muted=""></video>
</div>

云端漫步 发表于 2025-8-27 14:13:54

<iframe border="0" marginwidth="0" marginheight="0" src="http://www.iyinren.com/template/default/widget/share.php?id=7278" height="100" frameborder="no" width="510"></iframe>

云端漫步 发表于 2025-8-27 14:14:18

<style>
#mydiv {
    margin: 150px 0 30px calc(50% - 931px);
    display: grid;
    place-items: center;
    width: 1800px;
    height: 900px;
    background: lightblue url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/5/cvc.jpg') no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    user-select: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* 添加多种颜色转换动画 */
    animation: multiColorShift 20s infinite ease-in-out;
}
#vid {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    -webkit-mask: linear-gradient(to top right, red 92%, transparent 0);   
    z-index: 2;
    opacity: .45;
}

/* 定义多种颜色转换的动画 */
@keyframes multiColorShift {
    0% {
      filter: hue-rotate(0deg) saturate(1.2);
    }
    16% {
      filter: hue-rotate(60deg) saturate(1.3);
    }
    32% {
      filter: hue-rotate(120deg) saturate(1.2);
    }
    48% {
      filter: hue-rotate(180deg) saturate(1.4);
    }
    64% {
      filter: hue-rotate(240deg) saturate(1.2);
    }
    80% {
      filter: hue-rotate(300deg) saturate(1.3);
    }
    100% {
      filter: hue-rotate(360deg) saturate(1.2);
    }
}
</style>
音乐代码
<div id="mydiv">
    <video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/42/5b42d8d01da76.mp4" autoplay="" loop="" muted=""></video>
</div>

春华秋实 发表于 2025-8-27 15:50:10

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

欧阳风刀 发表于 2025-8-27 16:16:16

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

欧阳风刀 发表于 2025-8-27 16:16:41

感谢哥们分享！{:7_196:}

玫の玫 发表于 2025-8-27 21:09:08

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

玫の玫 发表于 2025-8-27 21:09:37

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

圊圊淥詶 发表于 2025-8-27 22:45:25

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

圊圊淥詶 发表于 2025-8-27 22:45:41

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

查看完整版本: 【漫步特效】躁动 探寻的青春/ 一张图片四季变色效果