本帖最后由 花简静 于 2024-3-6 19:56 编辑
<style>
#mydiv {
margin: 130px 0 0 calc(50% - 931px);
width: 1700px;
height: 900px;
background: url('https://pic.imgdb.cn/item/654ba309c458853aefca7eae.webp') no-repeat center/cover;
box-shadow: 0 0 10px #333;
overflow: hidden;
position: relative;
--state: paused;
}
#vid {
position: absolute;
width: 140%;
height: 120%;
top:-60px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .86;
}
lz-3d {
position: absolute;
left: calc(50% - 5px);
top: calc(50% - 5px);
width: 10px;
height: 10px;
border-radius: 50%;
opacity: .26;
background: gray;
transform: perspective(200px) rotate(var(--deg)) translate3d(var(--xx), var(--yy), var(--zz));
animation: o2C var(--du) var(--delay) infinite linear var(--state);
}
@keyframes o2C {
to { transform: perspective(200px) rotate(0) translate3d(0,0,0); }
}
</style>
<div id="mydiv">
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b86e6c5bf.mp4" autoplay="" loop="" muted=""></video>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/09/13/c8e886a22185280badb70cec588c6133.mp3" autoplay="" loop=""></audio>
<script>
let total = 80, ww = mydiv.offsetWidth, hh = mydiv.offsetHeight;
let script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/api/simpleplayer.js';
document.body.appendChild(script);
Array.from({length: total}).forEach( (item,key) => {
item = document.createElement('lz-3d');
item.style.cssText += `
background: #${Math.random().toString(16).substr(-6)};
--xx: ${Math.random() * ww * .75}px;
--yy: ${Math.random() * hh * .75}px;
--zz: ${100 + Math.random() * 100}px;
--deg: ${360 + Math.random() * 360}deg;
--du: ${15 + Math.random() * 15}s;
--delay: ${Math.random() * -15}s;
`;
mydiv.appendChild(item);
});
script.onload = () => {
HCPlayer({
papa: '#mydiv',
player_css: 'left: 10px; bottom: 10px;',
img: {
enter: '',/* 进入全屏按钮地址 */
quit: '',/* 退出全屏按钮地址 */
play: '',/* 播放按钮地址 */
pause: '',/* 暂停按钮地址 */
}
});
}
</script>
<br><br><br><br><br><br><br>
| 
.gif)
.gif)
