小雨的心 发表于 2025-4-1 09:19:16

【小雨音画】一刀斩

<style>
#mydiv { margin: 0 0 0 calc(40% - 771px);
display: grid;
place-items: center;
   width: 1600px;
   height:900px;
top:130px;
background: lightblue url('https://xiaoyudexin.oss-cn-beijing.aliyuncs.com/yidao.jpg') no-repeat center/cover;
box-shadow: 0px 0px 0px #DAA520;
user-select: none;
overflow: hidden;
position: relative;
z-index: 3;}

.mypic {
      position: absolute;
    right:1060px;
    top:100px;
      cursor: pointer;
    mix-blend-mode: Multiply;
    z-index: 3;
    }
   
   
#vid1 {
      position: absolute;
      width: 100%;
      height: 130%;
      top:-90px;
      object-fit: cover;
      pointer-events: none;
mix-blend-mode: screen; //
      z-index: 2;
      opacity: .50;
}




#vid2 {
      position: absolute;
      width: 60%;
      height: 60%;
                right:24%;
      top:-90px;
      object-fit: cover;
      pointer-events: none;
mix-blend-mode: screen; //滤色
      z-index: 2;
      opacity: .30;

    -webkit-mask: radial-gradient(circle,   cyan, cyan,rgba(0,0,0,.35),transparent, transparent, transparent, transparent);
}

#vid3 {
      position: absolute;
      width: 80%;
      height:100%;
                        right:0%;
      top:0px;
      object-fit: cover;
      pointer-events: none;
mix-blend-mode: screen; //滤色
      z-index: 2;
      opacity: .55;
               -webkit-mask: radial-gradient(circle,silver, lightgreen, cyan, transparent,transparent,transparent);
}



#vid4 {
      position: absolute;
      
      width: 100%;
      height: 110%;
      top:-90px;
      object-fit: cover;
      pointer-events: none;
mix-blend-mode: screen; //滤色

      z-index: 2;
      opacity: .50;
}
</style>


<div id="mydiv">   <div class="mypic"><img src="" alt="" /></div>      
<video id="vid1" src="" autoplay="" loop="" muted=""></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2269348/00/01/88/5b4c9123c51dd.mp4" autoplay="" loop="" muted=""></video>
<video id="vid3" src="https://img.tukuppt.com/video_show/15653652/01/28/55/6292ea858a819.mp4" autoplay="" loop="" muted=""></video>
<video id="vid4" src="https://img.tukuppt.com/video_show/15653652/00/79/86/60c98c8146068.mp4" autoplay="" loop="" muted=""></video>
</div>
   </div><audio id="aud" src="https://www.joy127.com/audio/115904.mp3" autoplay loop></audio>   
<br><br><br><br><br><br><br><br>

醉美水芙蓉 发表于 2025-4-1 19:56:12

欣赏小雨精彩单图！

醉美水芙蓉 发表于 2025-4-1 19:56:24

这图图好漂亮啊！

怀仁 发表于 2025-4-7 16:46:24

分享超给力，点赞赞赞赞

xiangrikui 发表于 2025-4-15 14:39:28

支持佳作，期待佳作连连

xicangzhiye 发表于 2025-5-1 09:14:11

藕是来打酱油滴...
页: [1]
查看完整版本: 【小雨音画】一刀斩