欢颜（云裳） 发表于 2025-4-2 19:54

【云裳音画】雪的背后


<style>
#mydiv { margin: 0 0 0 calc(50% - 1000px);
display: grid;
place-items: center;
width:1800px;
height:2390px;
top:130px;
background: lightblue url('https://bohann.net/data/attachment/forum/202503/31/223041sz6sfz26d4vhvbef.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/92/5e67af3447155.mp4" autoplay="" loop="" muted=""></video>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2652801422" autoplay="" loop=""></audio>
<br><br><br><br><br><br><br><br>

雾桥 发表于 2025-4-2 22:02

素雅高洁，像心灵孤寂而又干净

爆汁莓驴 发表于 2025-4-2 23:17

<div id="UU" style="position: relative;width: 100%;height: 0;padding-top: 150%;overflow: hidden;box-shadow: 3px 3px 5px #000;background:url('https://www.helloimg.com/i/2025/04/02/67ed4d5f67649.jpg')no-repeat center/100% 100%">
<iframe style="position: absolute;width:100%;height:100%;left:0;top:0;mix-blend-mode:multiply;z-index:1;opacity:1" frameborder="0" scrolling="no" allowfullscreen="true" allowtransparency="true" src="http://pan.yinhuabbs.cn/uploads/bzml/index.html"></iframe>
</div>
你的雪下不了，我却下起了雨:lol <br>
看似没有下雪的原因与上一个帖相反，透明度0.1看不出效果，恢复到正常就OK.<input type="button" value="主贴下雪切换" onclick="if(vid1.style.opacity==='1'){vid1.style.opacity='0.1';;this.value='你好啊！ '}else{vid1.style.opacity='1';this.value='您人好'}">

爆汁莓驴 发表于 2025-4-2 23:28

开个玩笑！前日在其他贴提起FLASH动效关于水珠，我找到了html5特效可以替代，效果也可以，只是无交互性。用的是插件，中画图片防链不能使用，后上传图床后能够显示，我试试效果。<br>插件样式背景是模糊的，制图用不了:L<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
过去用视频背景透明，我试了框架透明，OK!;P<br>只是点击画面缩放无效，这里放个按钮试试<input type="button" value="缩放" onclick="if(UU.style.transform<='scale(1.0)'){UU.style.transform='scale(1.5)'}else{UU.style.transform='scale(1.0)'};UU.style.transition='transform 10s ease-in-out'" title="点击缩放">单纯的图片，直接点击图片缩放有效。但复杂了譬如在图片上又加其他功能，缩放需要另外按钮操控。<br>
这个特效没用透明度，否则会影响原图的清晰度。加的特效其实在原图的下方。也符合主题：雪的背后是泪:funk: 。。
<div style="position: relative;width: 100%;height: 0;padding-top: 56.25%;overflow: hidden;border-radius: 8px;box-shadow: 3px 3px 8px #999;">
<iframe style="position: absolute;width: 100%;height: 100%;left: 0;top: 0;transform:scale(1.01)" frameborder="0" scrolling="no" allowfullscreen="true" allowtransparency="true" src="http://pan.yinhuabbs.cn/uploads/bzml/jxvideo.html?c=1&p=1&v=1&l=1&hlw=https://www.douyin.com/aweme/v1/play/?video_id=v02f52g10003ctpi7hiljhtbummsp3i0&bg=https://www.helloimg.com/i/2025/04/02/67ed4d5f67649.jpg"></iframe>
</div>

我也在 发表于 2025-4-2 23:41

喜欢这背景滤镜的运用，整体效果很棒。{:1_293:}

欢颜（云裳） 发表于 2025-4-3 20:17

我也在 发表于 2025-4-2 23:41
喜欢这背景滤镜的运用，整体效果很棒。

谢谢欣赏和点评，问好

欢颜（云裳） 发表于 2025-4-3 20:18

爆汁莓驴 发表于 2025-4-2 23:17
你的雪下不了，我却下起了雨
看似没有下雪的原因与上一个帖相反，透明度0.1看不出效果，恢复到 ...

我上边有下雪呢

欢颜（云裳） 发表于 2025-4-3 20:18

雾桥 发表于 2025-4-2 22:02
素雅高洁，像心灵孤寂而又干净

谢谢欣赏和点评，问好

么念 发表于 2025-4-8 10:01

画面处理精彩有意境

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

么念 发表于 2025-4-8 10:01
画面处理精彩有意境

谢谢欣赏和点评，问好
页: [1]
查看完整版本: 【云裳音画】雪的背后