本帖最后由 花简静 于 2024-6-10 23:00 编辑
<style>
#mydiv { margin: 130px 0 30px calc(50% - 931px); width: 1700px; height:900px; background: url('https://642303.freep.cn/642303/tu/jiangli.webp') no-repeat 0/cover; border: thick groove Tan; overflow: hidden; transition: 1s; z-index: 1; user-select: none; position: relative; }
.txtbox { position: absolute; display: grid; place-items: center; left: var(--x1); top: 600px; width: 50px; height: 50px; font: normal 30px sans-serif; text-align: center; color: white; box-sizing: border-box; cursor: pointer;opacity : .7; }
.txtbox::after { position: absolute; content: ''; inset: -2px; border: 2px dashed gray; border-color: green lightgreen yellow orange; border-radius: 50%; box-shadow: inset 0 0 20px Teal; transition: 1s; animation: rot 8s linear var(--delay) infinite var(--state); }
.txtbox:hover::after { box-shadow: inset 0 0 30px Wheat, 0 0 60px white; }
#vid { position: absolute; bottom: 0; width: 80%; height: 80%; right:-320px;object-fit: cover; mix-blend-mode: screen; pointer-events: none; opacity : .5;}
@keyframes move1 { to { left: var(--x2); } }
@keyframes move2 { to { left: var(--x1); } }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2130367281" autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/12/35/6193b48b9471d.mp4" loop muted></video>
</div>
<script>
(function() {
const ar = '贺・将离・芳辰'.split('');
const ww = 1600, duTime = 16, deTime = 0.5;
const total = duTime + ar.length * deTime + deTime;
let sAr = [], step = 0;//, aniName = 'move1';
ar.forEach((t,k) => {
let span = document.createElement('span');
span.className = 'txtbox';
span.textContent = t;
span.style.cssText += `
--x1: ${ww + k * 60 - ar.length * 60 - 120}px;
--x2: ${k * 60 +790}px;
--deg: -1turn;
--delay: -${Math.random() * k}s;
`;
sAr.push(span);
mydiv.appendChild(span);
});
let playAni = () => {
let aniName = ['move1','move2'][step % 2];
let deg = ['-1turn','1turn'][step % 2];
sAr.forEach((item,key) => {
item.style.left = ['var(--x1)','var(--x2)'][step % 2];
item.style.setProperty('--deg', deg);
let delay = step % 2 > 0 ? deTime * (sAr.length - key - 1) : deTime * key;
item.style.animation = `${aniName} ${duTime}s ${delay}s linear forwards var(--state)`;
});
step ++;
};
let mState = () => {
mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
sAr.forEach(item => item.title = ['暂停','播放'][+aud.paused]);
aud.paused ? vid.pause() : vid.play();
};
aud.loop = false;
aud.onplaying = aud.onpause = () => mState();
aud.onended = () => { step = 0; aud.play(); }
aud.ontimeupdate = () => { if(aud.currentTime >= total * step) playAni(); };
sAr.forEach(item => item.onclick = () =>aud.paused ? aud.play(): aud.pause());
})();
</script>
| 
