【漫步特效】躁动探寻的青春/ 一张图片四季变色效果 - 云荷-个人作品展示

<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>

复制代码