本帖最后由 花简静 于 2024-8-18 15:29 编辑
<style>
.pa { margin: 130px 0 20px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/20240523ruyi.webp') no-repeat center/cover; box-shadow: 3px 3px 6px gray; border-radius: 6px; z-index: 1; position: relative; }
#lzpa { position: absolute; right: 510px; top: 560px; width: 400px; height: 240px; cursor: pointer; }
#lzpa:hover #vid { transform: scale(1.5, 1.2); }
li-zi { position: absolute; width: 30px; height: 30px; border-radius: 0 100%; box-shadow: -1px -1px 6px rgba(255,255,255,.6); opacity: .8; offset-path: path('M0 120 A200 120 0 1 1 400 120 A200 120 0 1 1 0 120'); animation: move 20s linear infinite var(--state), size 20s linear infinite var(--state);opacity: .9; }
#vid { position: absolute; left: calc(50% - 130px); top: calc(50% - 88px); width: 260px; height: 170px; border-radius:50%; object-fit: cover; pointer-events: none; mix-blend-mode:multiply; transition: 2s; opacity: .5}
@keyframes move { to { offset-distance: 100%; } }
@keyframes size { 0%, 50%, 100% { transform: scale(1) rotateY(20deg); } 25% { transform: scale(0.5) rotateY(10deg); } 75% { transform: scale(1.5) rotateY(30deg); } }
</style>
<div class="pa">
<div id="lzpa"><video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/03/17/5baf478ba3a0e.mp4" autoplay loop muted></video></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=865040132" autoplay loop></audio>
</div>
<script>
var total = 12;
for(var i = 0; i < total; i ++) {
let lz = document.createElement('li-zi');
lz.style.cssText += `
animation-delay: -${20 / total * i}s;
background-color: #${Math.random().toString(16).substring(2, 8)};
`;
lzpa.appendChild(lz);
}
var mState = () => {
lzpa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? vid.pause() : vid.play();
};
aud.onplaying = aud.onpause = () => mState();
lzpa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<br><br><br><br><br><br>
| 
