银牌会员
性别保密
威望 点
注册时间2025-2-24
最后登录1970-1-1
在线时间 小时
好友
UID55159
听众
阅读权限100
- 积分
- 1056
 鲜花( 45)  鸡蛋( 0)
|

楼主 |
发表于 2025-6-15 11:10
|
显示全部楼层
本帖最后由 沈念初 于 2025-6-18 18:11 编辑
21页 黄玫瑰
#mydiv { margin: 0 0 0 calc(50% - 850px);
display: grid;
place-items: center;
width: 1600px;
height: 900px;
top:130px;
background: lightblue url('https://cccimg.com/view.php/4e9121df9469ff9d6b8d1b7f198f5342.jpg') no-repeat center/cover;
box-shadow: 0px 0px 0px ;
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">
<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="http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=mQuF5LmAcFTpnmEy" autoplay="" loop=""></audio>
|
|