欢颜（云裳） 发表于 2025-4-4 11:22

【云裳音画】我的相思已入膏肓


<style>#mydiv { margin: 0 0 0 calc(50% - 980px); display: grid; place-items: center; width: 1800px; height: 1080px;top:60px; background: lightblue url('https://bohann.net/data/attachment/forum/202504/02/204319p2oz9s9i2wpsedvc.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; overflow: hidden; position: relative; z-index: 1; --state: running; }
#codePre { font: normal 14px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
.green { color: green; }
#vid {
        position: absolute;
        width: 100%;
        height: 110%;
        top:-80px;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;
        z-index: 5;
        opacity: .49;
}</style><div id="mydiv"><video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/58/5b56a385e42de.mp4" autoplay="" loop="" muted=""><audio style="width:300px;height:64px;" controls="controls" autoplay="autoplay" loop="loop" <audio="" id="aud" src="https://music.163.com/song/media/outer/url?id=5282021"></audio>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></video></div><br><br><br><br><br><br><br><br><br>

爆汁莓驴 发表于 2025-4-4 20:41

上次发现除视频可以透明，框架也能透明。我现在看看图片特效（gif）能否透明。。。
<div style="position: relative;width: 100%;height: 0;padding-top: 56.25%;overflow: hidden;box-shadow: 3px 3px 5px #000;background:url('https://bohann.net/data/attachment/forum/202504/02/204319p2oz9s9i2wpsedvc.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 style="position: absolute;width:100%;heigh:auto;left:0;top:0;mix-blend-mode:screen;z-index:2;opacity:0.3;transform:scale(1.3)"src="https://img.tukuppt.com/video_show/2475824/00/01/58/5b56a385e42de.mp4" autoplay muted loop></video>
<img style="position: absolute;width:100%;heigh:auto;left:0;top:0;mix-blend-mode:multiply;z-index:3;opacity:0.1;transform:scale(1.0)"src="https://wimg.588ku.com/gif620/21/07/08/1120fcb14726cbc013ff4392be53aa99.gif" autoplay muted loop>
<video 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)"src="https://video.699pic.com/videos/93/11/75/a_WNVQIM2YCVTS1598931175_10s.mp4" autoplay muted loop></video>
</div>
OK！估计只要能插入，啥都可以透明:lol

爆汁莓驴 发表于 2025-4-4 20:54

通过透明度调整，图片特效可以有不同的效果，和视频一样

爆汁莓驴 发表于 2025-4-4 21:04

框架、视频、图片特效能够一起使用，只要把层设置合理

岚儿 发表于 2025-4-4 21:20

好漂亮音画！
岚儿学习了！

欢颜（云裳） 发表于 2025-4-6 17:25

爆汁莓驴 发表于 2025-4-4 21:04
框架、视频、图片特效能够一起使用，只要把层设置合理

谢谢欣赏和指导，问好

欢颜（云裳） 发表于 2025-4-6 17:25

岚儿 发表于 2025-4-4 21:20
好漂亮音画！
岚儿学习了！

谢谢欣赏和点评，问好

么念 发表于 2025-4-8 09:50

制作精彩，欣赏问好

欢颜（云裳） 发表于 2025-4-8 20:11

么念 发表于 2025-4-8 09:50
制作精彩，欣赏问好

谢谢欣赏和点评，问好
页: [1]
查看完整版本: 【云裳音画】我的相思已入膏肓