【菲儿】我走在路上
本帖最后由 菲儿 于 2025-5-13 10:24 编辑 <br /><br /></div></div>
</div><div class="pct"><style type="text/css">.pcb{margin-right:0}</style><div class="pcb">
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_424259">
<style>
#papa {
margin: 0 0 0 calc(50% - 931px);
border: 1px solid gray;
width: 1800px;
height: 900px;
top:130px;
background: #666 url('http://bohan.nuxmax.com/data/attachment/forum/202401/20/170514at8z183wg121z179.jpg') no-repeat center/cover;
box-shadow: 0 0 8px 0 #000;
position: relative;
overflow: hidden;
display: grid;
place-items: center;
--clipPath: '';
}
li-zi {
position: absolute;
width: 6px;
height: 12px;
border-radius: 100% 60%;
background: tan;
right:10px;
animation: imov 6s infinite;
}
@keyframes moving {
from { opacity: .0; transform: rotate(00) translate(0,0); }
to { opacity: 1; transform: rotate(var(--deg)) translate(var(--x0),var(--y0)); }
}
@keyframes rotating {
to { transform: rotate(-360deg); }
}
#player {
position: absolute;
right:280px;
top:520px;
width: 200px;
height: 200px;
cursor: pointer;
background: url('http://qhxy.52qingyin.cn/file/20231216191230_82253.svg') no-repeat center/cover;
animation: rotating 18s linear infinite var(--state);
}
#vid {
position: absolute;
width: 30%;
height: 30%;
right:130px;
top:480px;
border-radius: 2%;
opacity: .96;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
}
</style>
<div id="papa">
<div id="player" title="播放/暂停"></div>
<css-doodle id="lrc">
:doodle {
@size: auto 4em;
position: absolute;
bottom: 10px;
opacity: .56;
--geci: 'css-doodle player';
--motion: cover2;
--tt: 1s;
}
display: grid;
place-items: center start;
:before, :after {
content: var(--geci);
color: AliceBlue;
font: bold 2em sans-serif;
text-shadow: 1px 1px 2px #000;
white-space: pre;
}
:after {
position: absolute;
width: 0;
color:LightSkyBlue;
overflow: hidden;
animation: var(--motion) var(--tt) linear forwards var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</css-doodle>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/35/15/63086e0d3cf27.mp4" autoplay="" loop="" muted=""></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=27853883" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
(function() {
let all = 360;
for(let i = 0; i < all; i++) {
let movBall = document.createElement('li-zi');
movBall.style.cssText += `
--x0: -600px;
--y0: -700px;
--deg: ${Math.random() * 105}deg;
left: 600px;
bottom: 300px;
left: 600px;
bottom: 0px;
background: linear-gradient( to left, rgba(135,206,250,.8), rgba(225,225,225,.15));
animation: moving ${Math.random() * 10 + 10}s -${Math.random() * 120}s infinite var(--state);
`;
papa.prepend(movBall);
}
let playMusic = () => aud.paused ? (aud.play(), vid.play(), player.title='暂停') : (aud.pause(), vid.pause(), player.title='播放');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing',mState,false);
aud.addEventListener('pause',mState,false);
player.addEventListener('click',playMusic,false);
let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.body.appendChild(script);
let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
myplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<br><br><br><br><br><br><br><br></td></tr></table> 问好花潮的所有人，祝大家周末愉快！{:4_204:}也谢谢简静分享的黑黑师的代码，来学习一下，右边间距没调好，不会调啦{:4_203:} 美美的音画{:4_187:}欣赏菲儿美帖。 是有点向右偏了，害我输入框很小，可请马老帮看下{:4_173:} 好漂亮的制作，歌词同步也是黑黑的歌词同步方法呢。欣赏菲儿好帖{:4_199:} 菲儿的底图制作很漂亮呢，又一个音画高手{:4_199:} 菲儿的图做得太漂亮了，画面素雅简洁，美美哒{:4_187:} 动态图加的很巧妙。效果好美啊{:4_181:} 问好巧手的菲儿，棒棒哒{:4_187:} 樵歌 发表于 2024-1-20 19:55
是有点向右偏了，害我输入框很小，可请马老帮看下
谢谢樵歌，可能是我的图片大小不符合源代码，就这样吧{:4_173:}，很喜欢这个动画和歌曲代码。 红影 发表于 2024-1-20 20:27
好漂亮的制作，歌词同步也是黑黑的歌词同步方法呢。欣赏菲儿好帖
红影好{:4_185:}，就是看见黑黑师的歌词同步代码很喜欢就套用了{:4_205:} 红影 发表于 2024-1-20 20:28
菲儿的底图制作很漂亮呢，又一个音画高手
影儿啊，我不是高手，就是学习玩一下下，{:4_191:}祝新周快乐！ 千羽 发表于 2024-1-21 22:06
菲儿的图做得太漂亮了，画面素雅简洁，美美哒
千羽好，你的图图才漂亮呢{:4_179:}像你学习 千羽 发表于 2024-1-21 22:18
动态图加的很巧妙。效果好美啊
套用的现成的代码{:4_173:}感觉动效比图片还好看 菲儿 发表于 2024-1-22 12:07
红影好，就是看见黑黑师的歌词同步代码很喜欢就套用了
是啊，黑黑不但歌词同步是自己开发的，还有好多的好东西呢{:4_187:} 菲儿 发表于 2024-1-22 12:09
影儿啊，我不是高手，就是学习玩一下下，祝新周快乐！
图途中的小女孩很是可爱俏皮，感觉跟菲儿的头像有相似呢{:4_173:} 红影 发表于 2024-1-22 16:18
是啊，黑黑不但歌词同步是自己开发的，还有好多的好东西呢
嗯嗯，花潮真是个宝藏呢{:4_205:}，我慢慢来挖掘来学习{:4_173:} 红影 发表于 2024-1-22 16:19
图途中的小女孩很是可爱俏皮，感觉跟菲儿的头像有相似呢
红影慧眼{:4_191:}观察得仔细{:4_173:} 菲儿 发表于 2024-1-22 12:05
谢谢樵歌，可能是我的图片大小不符合源代码，就这样吧，很喜欢这个动画和歌曲代码。
在电脑很看得好，瘦机上不太行{:4_189:} 菲儿 发表于 2024-1-22 17:03
嗯嗯，花潮真是个宝藏呢，我慢慢来挖掘来学习
我们这里好多人从一点不会也能跟着黑黑做点帖子了呢，我就是这样的，之前完全不会这样的代码音画{:4_173:}
页:
[1]
2