【黑师代码】行至天光（学习黑师20240604《知音》齿轮字体走动效果）
<style>#mydiv { margin: 130px 0 30px calc(50% - 931px); width: 1700px; height:900px; background: url('https://642303.freep.cn/642303/tu/20240603hai%2002.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'];
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_178:} 马黑黑 发表于 2024-6-11 20:58
{:4_170:}看着用了千斤顶的样纸。。。 南无月 发表于 2024-6-11 21:04
看着用了千斤顶的样纸。。。
消消食 马黑黑 发表于 2024-6-11 21:05
消消食
{:4_170:}我看行。。就当是散步了 南无月 发表于 2024-6-11 21:08
我看行。。就当是散步了
这比散步厉害了 欣赏月月好制作，漂亮的滚动字效果{:4_199:} 月月喜欢做大图，效果棒棒的 标题字排版感觉不错哦 欣赏月月精彩的制作 这特效字体和视频以及背景浑然一体，太奇特了，看着字体缓缓移动，给人的感觉真奇妙{:4_199:} 月儿的构思好棒啊{:4_199:} 马黑黑 发表于 2024-6-11 21:09
这比散步厉害了
网站移过来的时候，试贴时，中间那个小点出问题 了。
变成一堆数字。。
只好用一个小横杠代替了{:4_170:} 小辣椒 发表于 2024-6-11 21:11
月月喜欢做大图，效果棒棒的
哎，我看着我的屏幕最大装这么大就大约定这么大了。。1700*900的。。
小辣椒 发表于 2024-6-11 21:12
标题字排版感觉不错哦
也是在学习排字，这个排字真的不好学啊。。没有设计功底，老是整得马马虎虎{:4_170:} 小辣椒 发表于 2024-6-11 21:12
欣赏月月精彩的制作
{:4_199:}小辣椒的支持一直都在，开心 名师出高徒，欣赏中~~{:4_204:} 红影 发表于 2024-6-11 21:15
这特效字体和视频以及背景浑然一体，太奇特了，看着字体缓缓移动，给人的感觉真奇妙
这个就是纯套用，改了字和背景色。。{:4_170:}
页:
[1]
2