本帖最后由 花简静 于 2024-2-25 21:13 编辑
<style>
#papa { margin: 130px 0 0 calc(50% - 931px); width: 1700px; height: 900px; background: #666 url('https://pic.imgdb.cn/item/657acc2ac458853aef748ce0.jpg') no-repeat center/cover; overflow: hidden; display: grid; place-items: center; box-shadow: 3px 6px 12px gray; position: relative; --state: paused; }
#player { width: 500px; height: 500px;top:-180px;left:105px;cursor: pointer; background: url('http://qhxy.52qingyin.cn/file/20231213151247_28361.svg') no-repeat center/cover; filter: brightness(200%) opacity(.9); animation: rotating 22s linear infinite var(--state); position: relative; }
#player::before, #player::after { position: absolute; content: ''; width: 100%; height: 100%; background: inherit; transform: rotate(240deg); filter: invert(80%) opacity(.9); }
#player::after { transform: rotate(120deg); filter: invert(100%) opacity(.9); }
@keyframes rotating { to { transform: rotate(-360deg); } }
#vid {
position: absolute;
width: 120%;
height: 100%;
right:-300px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index:3;
opacity: .30;
}
lz-3d {
position: absolute;
left: calc(56% - 5px);
top: calc(30% - 5px);
width: 13px;
height: 13px;
border-radius: 50%;
opacity: .66;
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="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2422006/00/01/63/5b472f92d774b.mp4" autoplay="" loop="" muted=""></video>
<div id="player" title="播放/暂停"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29470947.mp3" autoplay loop></audio>
</div>
<script>
let total = 200, ww = papa.offsetWidth, hh = papa.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);
let loadJs = (url,callback) => {
let body = document.querySelector('body'), jsNode = document.createElement('script');
jsNode.charset = 'utf-8';
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = () => callback();
};
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;
`;
papa.appendChild(item);
});
let playMusic = () => aud.paused ? (aud.play(), player.title='暂停') : (aud.pause(), player.title='播放');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing',mState,false);
aud.addEventListener('pause',mState,false);
player.addEventListener('click',playMusic,false);
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
<Br><Br><Br><Br><Br><Br>
| 
川公网安备51180202512072 )
发表于 2024-2-25 20:52
发表于 2024-2-25 21:03
