秦风-无衣
本帖最后由 绿叶清舟 于 2024-6-15 20:34 编辑 <br /><br /><style>#mydiv { margin: 30px 0 30px calc(50% - 701px); width: 1200px; height:800px; background: url('https://p.upyun.com/demo/tmp/rNaIDWj1.webp') 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: 50px; height: 50px; font: normal 30px sans-serif; text-align: center; color: #f0ff11; box-sizing: border-box; cursor: pointer; }
.txtbox::after { position: absolute; content: ''; inset: -2px; border: 2px dashed gray; border-color: #c02803 #2a1205 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 #5a2207, 0 0 60px white; }
#vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); 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=2017822802" autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2432605/00/01/90/5b4cd0d177954.mp4" loop muted></video>
</div>
<script>
(function() {
const ar = '秦风·无衣'.split('');
const ww = 1200, 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> 这几天在看《大秦赋》怎么感觉那谁当今在做的很多事这么象大秦当年做的一样一样的呢 绿叶清舟 发表于 2024-6-15 20:38
这几天在看《大秦赋》怎么感觉那谁当今在做的很多事这么象大秦当年做的一样一样的呢
历史总是惊现惊人相似的一幕 无衣，有铠甲 这画面很悲壮的感觉，这移动小播被清舟调得好美，整体背景的画面色彩也很奇特。
欣赏清舟好帖{:4_199:} 马黑黑 发表于 2024-6-15 22:26
历史总是惊现惊人相似的一幕
会不会有一天得逞呢 红影 发表于 2024-6-15 23:06
这画面很悲壮的感觉，这移动小播被清舟调得好美，整体背景的画面色彩也很奇特。
欣赏清舟好帖
谢谢影，这几天不知道再玩啥了{:4_189:} 绿叶清舟 发表于 2024-6-19 21:04
会不会有一天得逞呢
这说不好 马黑黑 发表于 2024-6-19 21:12
这说不好
真到这一天人类的灾难就来了 绿叶清舟 发表于 2024-6-19 21:18
真到这一天人类的灾难就来了
该来也阻挡不了 绿叶清舟 发表于 2024-6-19 21:04
谢谢影，这几天不知道再玩啥了
黑黑的新代码很多的呢，随便哪个去试着做做都会很漂亮的呢{:4_187:} 马黑黑 发表于 2024-6-19 21:37
该来也阻挡不了
怎么变咱都看不到了 红影 发表于 2024-6-20 10:28
黑黑的新代码很多的呢，随便哪个去试着做做都会很漂亮的呢
主要找不到有感觉的音乐了 绿叶清舟 发表于 2024-6-20 20:44
主要找不到有感觉的音乐了
可以先想主题啊，我记得你说随便什么标题都能找到相应的歌曲或音乐呢{:4_204:} 绿叶清舟 发表于 2024-6-20 20:44
怎么变咱都看不到了
刷新一下吧 红影 发表于 2024-6-20 22:17
可以先想主题啊，我记得你说随便什么标题都能找到相应的歌曲或音乐呢
以前可以现在难啊很多都保护起来了，能共享的少了 马黑黑 发表于 2024-6-20 22:22
刷新一下吧
这么简单啊 绿叶清舟 发表于 2024-6-21 19:00
这么简单啊
是的 马黑黑 发表于 2024-6-21 19:50
是的
还是不刷的好看不见是幸福了 绿叶清舟 发表于 2024-6-21 20:17
还是不刷的好看不见是幸福了
估计是的吧
页:
[1]
2