醉美水芙蓉 发表于 2025-3-16 19:37:44

【云画】春三月

<style>
#mydiv { margin: 0 0 0 calc(50% - 881px);
display: grid;
place-items: center;
   width: 1600px;
   height: 900px;
top:30px;
background: lightblue url('https://bbs.cnzv.cc/up/upload/pic/12/20250316-c04fb022778cf3f11eda26f594eec8e4.jpg') no-repeat center/cover;
box-shadow: 0px 0px 0px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 3;

#vid {
      position: absolute;
      width: 100%;
      height:120%;
                right:0%;
      top:-80px;
      object-fit: cover;
      pointer-events: none;
mix-blend-mode: lighten; //变亮
      z-index: 5;
      opacity: .89;




}


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

#vid2 {
      position: absolute;
      width: 100%;
      height: 110%;
      top:-80px;
      object-fit: cover;
      pointer-events: none;
      mix-blend-mode: screen;
      z-index: 2;
      opacity: .95;
}



#mypic1 {
      position: absolute;
    right:600px;
    top:520px;
            width: 90px;
        height: 90px;
      cursor: pointer;
    mix-blend-mode: Multiply;
    z-index: 3;

    }

</style>

<div id="mydiv">

        <video id="vid" src="" loop></video>               
        <video id="vid1" src="https://img.tukuppt.com/video_show/15653652/00/79/55/60c1c435eec21.mp4" autoplay="" loop="" muted=""></video>        
        <video id="vid2" src="" autoplay="" loop="" muted=""></video>

        <img id="mypic1" src="https://pic1.imgdb.cn/item/67d5666e88c538a9b5bec9dd.gif" alt="" />

</div>

        <audio id="aud" src="http://www.eev3.com/plug/down.php?ac=music&id=mkvvdhhvw&k=320kmp3" autoplay loop></audio>
<script>
(function() {
        let mState = () => {
                aud.paused ? (mypic.style.setProperty('--state','paused'), vid.pause()) : (mypic.style.setProperty('--state','running'), vid.play());
        };
        aud.addEventListener('playing', mState, false);
        aud.addEventListener('pause', mState, false);
        mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

klxf 发表于 2025-3-17 09:59:07

好看，谢谢分享:)

心愿 发表于 2025-3-21 20:47:53

支持发布，好内容要传播

huogengjia 发表于 2025-3-24 22:28:13

赞，顶帖超有参考作用

翁奕童苑 发表于 2025-4-1 23:40:51

藕是来打酱油滴...

轻言 发表于 2025-4-8 08:06:05

支持佳作，风格独特新颖

enotufe 发表于 2025-4-15 14:52:21

赞，顶帖真的超有内涵
页: [1]
查看完整版本: 【云画】春三月