旧欢如梦话当年 TO：走过岁月（学习套用黑黑魂引路径设置效果）
<style>#mydiv { --width: 1400px; margin: 150px 0 30px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 750px; background: #eee url('https://wj1.zp68.com:812/lxx/yunhua/2022/06/01/xlaj.gif') no-repeat center/cover; box-shadow: 2px 2px 8px rgba(0,0,0,.7); overflow: hidden; z-index: 1; position: relative;}
#mydiv::after {content: attr(data-lrc); position: absolute; top: 85%; left: -0%; width: 100%; height: 60px; text-align: center; font: normal 35px/40px sans-serif; color: transparent;text-shadow: 1px 1px 1px rgba(230,230,250,.8);background: radial-gradient(pink, white, orange) center/120px 60px; -webkit-background-clip: text;}
.ball { position: absolute; width: 100px; height: 100px; background: url('https://wj1.zp68.com:812/lxx/yunhua/2022/06/01/ann.png') no-repeat 50%/96%; border-radius: 50%; opacity: .95; transition: width .5s, height .5s, opacity .5s; cursor: pointer; offset-path: path('M280 60 Q1440 360,620 320 '); offset-distance: 0; animation: 6s linear forwards;}
.ball:hover { width: 100px; height: 100px; opacity: .75; }
.ball:nth-of-type(1) { left: -20px; top: 0; animation-name: move1-1;}
.ball:nth-of-type(2) { left: 20px; top: 0; width: 100px; height: 100px;background: url('https://wj1.zp68.com:812/lxx/yunhua/2022/06/01/ann.png') no-repeat 50%/96%; offset-distance: 50%;mix-blend-mode: screen;}
@keyframes move1-1 {
from { offset-distance: 0%; transform: rotate(720deg); filter: hue-rotate(0); }
to { offset-distance: 50%; transform: rotate(0); filter: hue-rotate(360deg); }
}
@keyframes move1-2 {
from { offset-distance: 50%; transform: rotate(0); filter: hue-rotate(360deg); }
to { offset-distance: 0%; transform: rotate(720deg); filter: hue-rotate(0); }
}
@keyframes move2-1 {
from { offset-distance: 50%; transform: rotate(720deg); filter: hue-rotate(0deg); }
to { offset-distance: 100%; transform: rotate(0); filter: hue-rotate(360deg); }
}
@keyframes move2-2 {
from { offset-distance: 100%; transform: rotate(0); filter: hue-rotate(360deg); }
to { offset-distance: 50%; transform: rotate(720deg); filter: hue-rotate(0); }
}
#dt1{ position: absolute; width:12px; height: 12px; top: 100px; left: 200px; }
#dt2{ position: absolute; width:665px; height: 205px; top: 0px; left: 300px; }
#dt3{ position: absolute; width: 32px; height: 32px; top: 50px; left: 932px; }
</style>
<div id="mydiv" class="mydiv" data-lrc="HUACHAO">
<img id="dt2" src="https://wj1.zp68.com:812/lxx/yunhua/2022/06/01/55.png" alt="" />
<img id="dt1" src="https://xlaj.cn/assets/file/zp/20231030141805.jpg" alt="" />
<img id="dt3" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" />
<audio id="aud" src="https://wj1.zp68.com:812/lxx/yunhua/2022/06/01/002.mp3" autoplay loop></audio>
<div id="b1" class="ball"></div>
<div id="b2" class="ball"></div>
</div>
<script>
const balls = ;
b1.onanimationend = ()=> {
let ani = window.getComputedStyle(b1).getPropertyValue('animation-name');
if(ani === 'move1-1') {
b1.style.animationName = '';
b2.style.animationName = 'move2-1';
}else{
b1.style.animationName = 'move1-1';
}
};
b2.onanimationend = () => {
let ani = window.getComputedStyle(b2).getPropertyValue('animation-name');
if(ani === 'move2-1') {
b2.style.animationName = 'move2-2';
}else{
b2.style.animationName = '';
b1.style.animationName = 'move1-2';
}
};
var curkey = 0, lrcAr = [];
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
});
};
var mState = () => {
balls.forEach(b => {
b.style.animationPlayState = aud.paused ? 'paused' : 'running';
b.title = ['暂停','播放'][+aud.paused];
});
aud.paused ? vid.pause() : vid.play();
mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
};
aud.onplaying = aud.onpause = () => mState();
balls.forEach(b => b.onclick = () => aud.paused ? aud.play() : aud.pause());
window.onresize = () => mydiv.style.setProperty('--distance', mydiv.offsetWidth + 'px');
aud.onseeked = () => curkey = 0;
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr) {
mydiv.dataset.lrc = lrcAr;
curkey ++;
}
};
var lrc = `
旧欢如梦话当年\n帖赠：走过岁月\n当年初恋意中人\n你我信相诚\n爱根好比树缠藤\n心心相印互信任\n花前月下吐缤纷\n相识有缘分\n卿卿我我最心诚\n天老地荒不离分\n感谢岁月AE精彩制作\n相逢喜悦倍精神\n快乐又兴奋\n朝夕眷恋羡慕人\n天天相见道慰问\n爱情只怕不够深\n换来惹愁恨\n情海风波今朝生\n天长地久化灰尘\n。。。。。。\n自古多情空余恨\n不再续缘分\n空对惆怅千万恨\n如今相见竞悔恨\n无奈苍天捉弄人\n终究无缘分\n旧欢如梦叹今生\n烟消云散莫再等\n烟消云散莫再等\n烟消云散莫再等\n谢谢欣赏\n
`;
getAr(lrc);
</script>
@走过岁月
岁月这个AE制作我是最喜欢的之一，以前玩过的，今天重新做了送你，重温旧情{:4_170:} @马黑黑
黑黑我是做一个作业是一个了，也是没有别人的高质量{:4_198:} @红影
亲爱的，抄了你歌词同步，现在我是抄一个是一个了{:4_170:} 来收礼 不错，做得不错 给小辣椒鼓掌 {:4_199:} 谢谢小辣椒 {:4_179:} 这个制作漂亮，整体效果太美了 走过岁月 发表于 2024-7-1 21:21
来收礼
岁月来了，这个AE制作是你前几年的 走过岁月 发表于 2024-7-1 21:27
不错，做得不错
不错是你的制作不错，我沾光的{:4_173:} 走过岁月 发表于 2024-7-1 21:30
给小辣椒鼓掌
谢谢岁月，不过你的东西就是我的，所以再漂亮也是有你一半的功劳{:4_173:} 走过岁月 发表于 2024-7-1 21:30
谢谢小辣椒
不用谢啊，要谢就谢你自己了{:4_170:} 绿叶清舟 发表于 2024-7-1 21:32
这个制作漂亮，整体效果太美了
清舟好，这个是岁月的AE制作漂亮哦 小辣椒 发表于 2024-7-1 21:39
不错时你的制作不错，我沾光的
一起学习 走过岁月 发表于 2024-7-1 21:43
一起学习
也是的，我们都一起学习10年了{:4_173:} 小辣椒 发表于 2024-7-1 21:41
不用谢啊，要谢就谢你自己了
哈哈，没问题，有时间就送礼给你 走过岁月 发表于 2024-7-1 21:44
哈哈，没问题，有时间就送礼给你
别太累，没有时间就不做，没事的 这个花朵小播的路径设计得有趣，还带转弯的。
这背景好漂亮啊，欣赏亲爱的好帖{:4_199:}