本帖最后由 花简静 于 2025-2-5 19:12 编辑
<style>
#mydiv
{ margin: 130px 0 30px calc(50% - 931px);
display: grid;
place-items: center;
width: 1700px;
height: 900px;
background: lightblue url('https://642303.freep.cn/642303/tu/2025%E6%98%A5%E8%8A%82.webp') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;
}
#vid {
position: absolute;
width: 100%;
height: 110%;
top:150px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
-webkit-mask: linear-gradient(to bottom,transparent,red);
}
#vid1 {
position: absolute;
width: 100%;
height: 110%;
top:-80px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .25;
}
.xz { --w: 100px; --h: 100px; position: absolute; eft:1200px;top:600px;width: var(--w); height: var(--h); transform-style: preserve-3d; animation: rotate 45s linear infinite;l }
.xz img { width: var(--w); height: var(--h); position: absolute; }
.xz:hover { animation-play-state: paused; cursor: pointer; }
@keyframes rotate { 100% { transform: rotateY(360deg); } }
</style>
<div id="mydiv"><div class="xz"></div>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/19/03/01/17/12/33/video5c78f7814006b.mp4" autoplay="" loop="" muted=""></video>
<video id="vid1" src="https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b86e6c5bf.mp4" autoplay="" loop="" muted=""></video>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=538394677.mp3" autoplay="" loop=""></audio>
<script>
(function() {
let sf = document.createElement('script');
document.body.appendChild(sf);
let picAr = [
"http://qslt.net/uc_server/avatar.php?uid=11&size=big",
"http://qslt.net/uc_server/avatar.php?uid=1&size=big",
"http://qslt.net/uc_server/avatar.php?uid=2&size=big",
"http://qslt.net/uc_server/avatar.php?uid=14&size=big",
"http://qslt.net/uc_server/avatar.php?uid=16&size=big",
"http://qslt.net/uc_server/avatar.php?uid=136&size=big",
"http://qslt.net/uc_server/avatar.php?uid=214&size=big",
"http://qslt.net/uc_server/avatar.php?uid=101&size=big",
"http://qslt.net/uc_server/avatar.php?uid=3&size=big",
"http://qslt.net/uc_server/avatar.php?uid=237&size=big",
"http://qslt.net/uc_server/avatar.php?uid=37&size=big",
"http://qslt.net/uc_server/avatar.php?uid=142&size=big",
"http://qslt.net/uc_server/avatar.php?uid=679&size=big",
"http://qslt.net/uc_server/avatar.php?uid=616&size=big&ts=1",
"http://qslt.net/uc_server/avatar.php?uid=693&size=big",
"http://qslt.net/uc_server/avatar.php?uid=1031&size=big",
"http://qslt.net/uc_server/avatar.php?uid=1036&size=big",
"http://qslt.net/uc_server/avatar.php?uid=42&size=big",
"http://qslt.net/uc_server/avatar.php?uid=929&size=big",
"http://qslt.net/uc_server/avatar.php?uid=198&size=big",
"http://qslt.net/uc_server/avatar.php?uid=289&size=big",
"http://qslt.net/uc_server/avatar.php?uid=194&size=big",
"http://qslt.net/uc_server/avatar.php?uid=30&size=big",
"http://qslt.net/uc_server/avatar.php?uid=21&size=big",
"http://qslt.net/uc_server/avatar.php?uid=29&size=big",
"http://qslt.net/uc_server/avatar.php?uid=12&size=big",
"http://qslt.net/uc_server/avatar.php?uid=64&size=big",
"http://qslt.net/uc_server/avatar.php?uid=293&size=big",
"http://qslt.net/uc_server/avatar.php?uid=1040&size=big",
];
let iBox = document.querySelector(".xz");
let hStr = "";
let angle = 360 / picAr.length;
let tz = Math.tan(Math.PI / 180 * (180 - angle) /2 ) * iBox.clientWidth / 1.8;
for(j=0; j<picAr.length; j++) {
hStr += `<div style="transform: rotateY(${angle*j}deg) translateZ(${tz}px);"><img alt="" src="${picAr[j]}"
/></div>\n`;
}
iBox.innerHTML = hStr;
})();
</script>
| 
