【云裳音画】时光匆匆过
<style>
#mydiv { margin: 0 0 0 calc(50% - 1000px);
display: grid;
place-items: center;
width:1800px;
height:1500px;
top:130px;
background: lightblue url('https://www.ctyhlt.com/data/attachment/forum/202503/29/185534iwfni834cuvy2i0a.jpg')no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 3;}
#vid1 {
position: absolute;
width: 100%;
height: 100%;
top:10px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index:2;
opacity: .10;
}
#vid2 {
position: absolute;
width: 100%;
height: 100%;
right:8%;
top:10px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 5;
opacity: .39;
}
</style>
<div id="mydiv">
<video id="vid1" src="https://img.tukuppt.com/video_show/2269348/00/14/89/5e67059590e3b.mp4" autoplay="" loop="" muted=""></video>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=193379" autoplay="" loop=""></audio>
<br><br><br><br><br><br><br><br>
<div style="position: relative;width: 100%;height: 0;padding-top: 56.25%;overflow: hidden;box-shadow: 3px 3px 5px #000;background:url('https://www.ctyhlt.com/data/attachment/forum/202503/29/185534iwfni834cuvy2i0a.jpg')no-repeat center/100% 100%" onclick="if(this.style.transform<='scale(1.0)'){this.style.transform='scale(1.5)'}else{this.style.transform='scale(1.0)'};this.style.transition='transform 10s ease-in-out'" title="点击缩放">
<video id="sp" style="position: absolute;width:100%;heigh:auto;left:0;top:0;mix-blend-mode:multiply;z-index:1;opacity:0.1;transform:scale(1.3)" autoplay muted loop src="https://img.tukuppt.com/video_show/2269348/00/14/89/5e67059590e3b.mp4"></iframe>
</div>
这个视频特效如果不设置透明度0.1，效果没有这么好！看来视频特效还需要透明度才给力！ 这条路看着有点荒芜啊 欣赏学习精彩制作，祝安！
诺北 发表于 2025-4-1 10:49
这条路看着有点荒芜啊
谢谢欣赏和指导，问好 爆汁莓驴 发表于 2025-4-1 04:05
这个视频特效如果不设置透明度0.1，效果没有这么好！看来视频特效还需要透明度才给力！
谢谢欣赏和指导，学习了，问好 么念 发表于 2025-4-1 14:42
欣赏学习精彩制作，祝安！
谢谢欣赏和指导，学习了，问好
页:
[1]