财神来到我家门前（学习黑黑老师的高山流水代码）
<style>
#mydiv { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height:720px; background: url('https://pic1.imgdb.cn/item/679b428dd0e0a243d4f8ac6c.jpg') no-repeat 0/cover; border: thick groove lightpink; overflow: hidden; transition: 1s; z-index: 1; user-select: none; position: relative; }
#mydiv:hover { background-size: 120%; background-position: center; }
.txtbox { position: absolute; display: grid; place-items: center; left: var(--x1); top: 20px; width: 80px; height: 80px; font: normal 30px sans-serif; text-align: center; color: white; box-sizing: border-box; cursor: pointer; }
.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 plum; transition: 1s; animation: rot 8s linear var(--delay) infinite var(--state); }
.txtbox:hover::after { box-shadow: inset 0 0 30px green, 0 0 60px white; }
#vid { position: absolute; top: 0; width: 116%; height: calc(100% + 20px);opacity: .36;object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
@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=1818277344.mp3" autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1ca4afd33e2.mp4" loop muted></video>
</div>
<script>
(function() {
const ar = '财神来到我家门前'.split('');
const ww = 1280, 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 - 20}px;
--x2: ${k * 60 + 10}px;
--deg: -1turn;
--delay: -${Math.random() * k}s;
`;
sAr.push(span);
mydiv.appendChild(span);
});
let playAni = () => {
let aniName = ['move1','move2'];
let deg = ['-1turn','1turn'];
sAr.forEach((item,key) => {
item.style.left = ['var(--x1)','var(--x2)'];
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> 恭喜发财！~~ 来迎财神了。 为位财神爷喜欢黄梅戏{:4_189:} 祝梦江南朋友福寿绵绵、福气满门。 愤怒的葡萄 发表于 2025-1-31 08:58
恭喜发财！~~
谢谢，恭喜发财！{:4_173:} 庶民 发表于 2025-1-31 09:18
来迎财神了。
谢谢，恭喜发财！ 樵歌 发表于 2025-1-31 09:24
为位财神爷喜欢黄梅戏
{:4_173:}{:4_173:}谢谢，恭喜发财！ 梦油 发表于 2025-1-31 09:37
祝梦江南朋友福寿绵绵、福气满门。
谢谢，同享美好生活，健康长寿！ 有趣，原来点击文字是暂停。这个很热闹啊{:4_187:} 制作漂亮，给江南点赞{:4_199:} 红影 发表于 2025-1-31 10:33
有趣，原来点击文字是暂停。这个很热闹啊
谢谢影子，我看中的是黑黑老师的来回移动文字。对烟火调低了明亮度，否则财神爷会受不了。{:4_173:} 红影 发表于 2025-1-31 10:33
制作漂亮，给江南点赞
谢谢，谢谢，祝您新年快乐，阖家幸福！{:4_187:} 梦江南 发表于 2025-1-31 11:29
谢谢影子，我看中的是黑黑老师的来回移动文字。对烟火调低了明亮度，否则财神爷会受不了。
这个江南做了自己的调整，很好呢{:4_187:} 梦江南 发表于 2025-1-31 11:29
谢谢，谢谢，祝您新年快乐，阖家幸福！
谢谢，给江南拜年了，过年好{:4_187:} 红影 发表于 2025-1-31 13:13
这个江南做了自己的调整，很好呢
这也是在学习黑黑和代码，还请您多多指导。{:4_204:} 红影 发表于 2025-1-31 13:13
谢谢，给江南拜年了，过年好
我们一起开心过年！初三快乐！{:4_187:} 梦江南 发表于 2025-1-31 13:48
这也是在学习黑黑和代码，还请您多多指导。
我也是学生呢{:4_173:} 梦江南 发表于 2025-1-31 13:53
我们一起开心过年！初三快乐！
谢谢，初三快乐{:4_187:} 红影 发表于 2025-1-31 15:47
我也是学生呢
哈哈，您是个大学生了。
页:
[1]
2