欢颜（云裳） 发表于 2025-3-27 21:44

【云裳音画】春天的风


<style>
#mydiv { margin: 0 0 0 calc(50% - 1000px);
display: grid;
place-items: center;
width:1957px;
height:1080px;
top:130px;
background: lightblue url('https://bohann.net/data/attachment/forum/202503/27/213842nufi759w9ihs9dfd.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/2475824/00/01/68/5b48425912ddd.mp4" autoplay="" loop="" muted=""></video>
<video id="vid1" src="https://img.tukuppt.com/video_show/2475824/00/01/58/5b56a385e42de.mp4" autoplay="" loop="" muted=""></video>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2164670723" autoplay="" loop=""></audio>
<br><br><br><br><br><br><br><br>

爆汁莓驴 发表于 2025-3-28 04:06

重复图片试试移动



<div style="position: relative;width: 100%;height: 0;padding-top: 56.25%;overflow:hidden;box-shadow: 3px 3px 8px #999;background-color:mediumturquoise;">
<iframe style="position: absolute;width: 100%;height: 100%;left: 0;top: 0;transform:scale(1.1)" oncontextmenu="return false" frameborder="0" scrolling="no" allowfullscreen="true" allowtransparency="true" src="http://pan.yinhuabbs.cn/uploads/bzml/%E7%BB%84%E5%9B%BE.html?url=https://img.tukuppt.com/video_show/2475824/00/01/68/5b48425912ddd.mp4&v=&k=2&s=0.5&h=screen&n1=https://bohann.net/data/attachment/forum/202503/27/213842nufi759w9ihs9dfd.jpg&n2=https://bohann.net/data/attachment/forum/202503/27/213842nufi759w9ihs9dfd.jpg"></iframe>
</div>
移动的好处，手机两指放大后便于浏览。也可全屏后完整浏览。

爆汁莓驴 发表于 2025-3-28 04:17

你加的视频特效没有显示出来，可能是视频重复了，用一个。也可能是视频样式宽高和背景制图的宽高不一致。
<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/202503/27/213842nufi759w9ihs9dfd.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:screen;opacity:1;transform:scale(1.3)" autoplay muted loop src="https://video.699pic.com/videos/90/45/60/b_xRDI8AhyYj0q1552904560_10s.mp4"></iframe>
</div>
手机先完整显示全图，一目了然。再两指缩放浏览看细节，如果再大点可点击画面缩放。

爆汁莓驴 发表于 2025-3-28 05:14

熊猫办公的视频特效电脑可以显示，但我的手机显示不出，有视频提示并下载，播放不出！拉播放条也没用（上面特效换别家的也无效），不播放。:lol可能手机太落后了，特效视频码手机不能适应。

欢颜（云裳） 发表于 2025-3-28 21:02

爆汁莓驴 发表于 2025-3-28 04:06
重复图片试试移动




谢谢欣赏和指导，学习了，问好

诺北 发表于 2025-4-1 10:41

挺漂亮的一张图

么念 发表于 2025-4-1 14:29

好看单图，欣赏学习精彩制作

欢颜（云裳） 发表于 2025-4-2 00:03

诺北 发表于 2025-4-1 10:41
挺漂亮的一张图

谢谢欣赏和指导，问好

欢颜（云裳） 发表于 2025-4-2 00:04

么念 发表于 2025-4-1 14:29
好看单图，欣赏学习精彩制作

谢谢欣赏和指导，，问好
页: [1]
查看完整版本: 【云裳音画】春天的风