向荣 发表于 2025-3-6 17:13

【向荣音画】你的万水千山


<style>
#mydiv { margin: 0 0 0 calc(50% - 781px);
display: grid;
place-items: center;
width: 1600px;
height: 900px;
top:130px;
background: lightblue url('http://pan.yinhuabbs.cn/uploads/%E5%90%91%E8%8D%A3/3_052215.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 3;}
#vid {
         position: absolute;
         width: 100%;
         height: 110%;
         top:-80px;
         object-fit: cover;
         pointer-events: none;
         mix-blend-mode: screen;
         z-index: 4;
         opacity: .15;
}
</style>   
<div id="mydiv">
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/01/04/62/614ade273f6d1.mp4" autoplay="" loop="" muted=""></video>
</div>
<p></p><br><br><br><b<br><br><br><video controls="" autoplay="" name="media"><source src="http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=WHtBvRWj2y48EWcp" type="audio/mpeg"></video>

爆汁莓驴 发表于 2025-3-6 21:27

<div style="position: relative;width: 100%;height: 0;padding-top: 56.25%;overflow: hidden;box-shadow: 3px 3px 5px #000;background:url('http://pan.yinhuabbs.cn/uploads/%E5%90%91%E8%8D%A3/3_052215.jpg')no-repeat center/100% auto" onclick="if(this.style.transform<='scale(1.0)'){this.style.transform='scale(1.5)'}else{this.style.transform='scale(1.0)'};this.transition='transform 0.3s ease-in-out'" title="点击缩放">
<video style="position: absolute;width:100%;heigh:auto;left:0;top:0;mix-blend-mode:screen;opacity:0.15;" autoplay muted loop src="https://img.tukuppt.com/video_show/2418175/01/04/62/614ade273f6d1.mp4"></iframe>
</div>

爆汁莓驴 发表于 2025-3-6 23:44

手机试了。尽管点击画面可以缩放，但手机两指缩放效果更佳！图片在手机显示，第一要素，先保证完整显示，缩放手机可以达到效果，一下子把图片放大到极致反而适得其反，显示不完整。

么念 发表于 2025-3-7 15:36

好帖赞{:1_293:}，感谢分享！

诺北 发表于 2025-3-27 11:19

搭配上了翻唱，挺好挺好
页: [1]
查看完整版本: 【向荣音画】你的万水千山