代码
<style>
#mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height:680px; background: url('https://638183.freep.cn/638183/t24/2/bjlq.jpeg') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); overflow: hidden; z-index: 1; position: relative; }
txt-box { position: absolute; display: grid; place-items: center; left: var(--xx); bottom: 10px; width: 50px; height: 50px; font: normal 30px sans-serif; color: snow; cursor: pointer; transition: .5s; animation: move 5s var(--delay) linear infinite alternate var(--state); }
txt-box::after { position: absolute; content: ''; inset: -4px; border: thick outset lightgreen; border-radius: 0 50%; animation: rot 5s var(--delay) linear infinite alternate var(--state); }
txt-box:hover { filter: sepia(100%) drop-shadow(0 -80px 10px white); }
#vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: multiply; opacity: .75; pointer-events: none; }
@keyframes move { to { bottom: 150px; } }
@keyframes rot { to { transform: rotateX(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5269161" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/3664703/00/02/08/5b5041984d4dc.mp4" muted loop autoplay></video>
</div>
<script>
(function() {
const ar = '涧水流花去山云载鹤归'.split('');
const total = ar.length, half = Math.floor(ar.length / 2), ww = 700;
let tbAr = [];
ar.forEach((t,k) => {
let tbox = document.createElement('txt-box');
tbox.textContent = t;
tbox.style.cssText += `
--xx: ${ww / total * k + 180}px;
--delay: -${k < half ? k * 0.5 : (total - k) * 0.5}s;
`;
tbAr.push(tbox);
mydiv.appendChild(tbox);
});
aud.onplaying = aud.onpause = () => {
mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
aud.paused ? vid.pause() : vid.play();
tbAr.forEach(tb => tb.title = ['暂停','播放'][+aud.paused]);
};
tbAr.forEach(tb => tb.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script>
|