醉美水芙蓉 发表于 2025-3-28 21:30:36

【云画】一路生花 （图赠/醉美水芙蓉）

<style>
#mydiv { margin: 0 0 0 calc(50% - 931px);
display: grid;
place-items: center;
   width: 1700px;
   height: 956px;
top:130px;
background: lightblue url('https://bbs.cnzv.cc/up/upload/pic/12/20250328-f8e582837ae771d6f10229865aafa0cd.jpg') no-repeat center/cover;
box-shadow: 0px 0px 0px #DAA520;
user-select: none;
overflow: hidden;
position: relative;
z-index: 3;}


        .txtbox { position: absolute; display: grid; place-items: center; left: var(--x1);
        top: 830px;
        width: 30px; height: 30px;font: normal 18px   改参数（文字大小）
       
        sans-serif; text-align: center; color: white;
        box-sizing: border-box; cursor: pointer;opacity : .7; }
       
        .txtbox::after { position: absolute; content: ''; inset: -5px; border: 2px dashed gray; border-color: green lightgreen yellow orange; border-radius: 50%; box-shadow: inset 0 0 0px Teal; transition: 1s; animation: rot 3s linear var(--delay) infinite var(--state); }
        .txtbox:hover::after { box-shadow: inset 0 0 30px         Wheat, 0 0 60px white; }

        @keyframes move1 { to { left: var(--x2); } }
        @keyframes move2 { to { left: var(--x1); } }
        @keyframes rot { to { transform: rotate(var(--deg)); } }



.mypic {
position: absolute;
right: 350px;
top: 300px;
cursor: pointer;
mix-blend-mode: Multiply;
z-index: 3;

}


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

#vid2 {
      position: absolute;
      
      width: 40%;
      height: 50%;
                        right:10%;
      top:-50px;
      object-fit: cover;
      pointer-events: none;
mix-blend-mode: screen; //滤色
      z-index: 2;

-webkit-mask: radial-gradient(circle,silver, lightgreen, cyan, transparent,transparent,transparent,transparent);

}

#vid3 {
      position: absolute;
      
      width: 70%;
      height: 80%;
                        right:35%;
      top:120px;
      object-fit: cover;
      pointer-events: none;

mix-blend-mode: screen; //滤色
      z-index: 2;

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



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


}
</style>

<div id="mydiv"><img id="dt" src="https://pic1.imgdb.cn/item/67dea95288c538a9b5c35131.gif" alt="" style="position: absolute; width: 180px; top:180px;                         right:85%;" />
<video id="vid1" src="" autoplay="" loop="" muted=""></video>
<video id="vid2" src="" autoplay="" loop="" muted=""></video>
<video id="vid3" src="" autoplay="" loop="" muted=""></video>
<video id="vid4" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec493e202caa.mp4 " autoplay="" loop="" muted=""></video>
</div>
      <audio id="aud" src="https://www.eev3.com/plug/down.php?ac=music&id=wcmvhmcwv&k=320kmp3" autoplay loop></audio>
      
<br><br><br><br><br><br><br><br></td></tr></table>

klxf 发表于 2025-3-29 01:30:24

漂亮，谢谢精彩分享:)

tianjingui 发表于 2025-4-3 15:11:55

支持发布，内容值得回味

hongmeigui 发表于 2025-4-8 21:25:31

支持博主，分享太精彩咯

apivawugi 发表于 2025-4-15 18:34:21

感谢分享，增长生活经验
页: [1]
查看完整版本: 【云画】一路生花 （图赠/醉美水芙蓉）