时光背面的我 TO:千羽
本帖最后由 朵拉 于 2022-11-13 23:52 编辑 <br /><br /><style>#papa { margin: 120px 0 0 calc(50% - 581px); width: 1000px; height: 758px; background: gray url('https://pic1.imgdb.cn/item/637108d016f2c2beb161bb5f.jpg') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; user-select: none; overflow: hidden; perspective: 1000px; position: relative; z-index: 1; }
#mama { position: absolute; width: 620px; height: 620px; display: grid; grid-template-rows: repeat(8,8fr); grid-template-columns: repeat(8,8fr); border-radius: 50%; overflow: hidden; }
#mplayer { position: absolute; bottom: 10px; grid-template-columns: auto auto auto; gap: 6px; display: grid; place-items: center; font: normal 16px sans-serif; color: snow; z-index: 999; }
#btnplay, #mama { cursor: pointer; animation: rot 10s infinite linear; animation-play-state: var(--state); --state: paused; }
#prog { width: 200px; height: 20px; cursor: pointer; }
#lrc { --state: running; --motion: cover2; --tt: 1s; position: absolute; top: 10px; font: bold 2.4em sans-serif; color: hsl(240, 50%, 90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(30, 10%, 10%, .95)); z-index: 1000; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: pink; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg, hsla(240, 60%, 50%, .45), hsla(240, 100%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#mama > img, #mplayer > img { width: 40px; height: 40px; mix-blend-mode: screen; border-radius: 50%; transform-style: preserve-3d; }
#mama:hover .spark { zoom: 1.5; opacity: .95; }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(-1turn); } }
</style>
<div id="papa">
<div id="mama"></div>
<div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
<div id="mplayer">
<img id="btnplay" src="https://638183.freep.cn/638183/t22/gif/flash.gif" alt="" />
<progress id="prog" max="100"></progress>
<span id="tmsg">00:00 | 00:00</span>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1858139145.mp3" loop autoplay></audio>
<script>
(function() {
(function() {for(j=0; j<64; j++) {let ele = document.createElement('img'), size = Math.random()*50 + 10;ele.src = 'https://638183.freep.cn/638183/t22/gif/flash.gif';ele.className='spark';ele.alt = '';ele.style.cssText = `width: ${size}px;height: ${size}px;transform: rotate(${Math.random()*360}deg);opacity: .5;`;mama.appendChild(ele);}})();
let mKey = 0, mSeek = false, mFlag = true, lap = 0.5;
let lrcAr = [,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
btnplay.onclick = mama.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {prog.value = aud.currentTime / aud.duration * 100;tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - lap >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
let mState = () => aud.paused ? (btnplay.style.setProperty('--state', 'paused'), mama.style.setProperty('--state', 'paused'), lrc.style.setProperty('--state', 'paused')) : (mama.style.setProperty('--state', 'running'), btnplay.style.setProperty('--state', 'running'), lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
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 toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
})();
</script> @千羽
千羽好 看过来，收礼物啦{:4_204:} @马黑黑
马老师好，学生交作业了，请指正{:4_190:} 麻烦哪位管理老师帮忙 删了我的另一帖，谢谢{:4_204:}{:4_190:} 漂亮！
朵朵用手机做帖，还做得那么好，不知道手有多巧呢 @千羽 收礼开森 朵拉 发表于 2022-11-13 23:56
麻烦哪位管理老师帮忙 删了我的另一帖，谢谢
嗯，刚才去看，那个帖子回复框不见了，我去删了吧。 做得漂亮，欣赏朵宝好帖，羽儿收礼开心{:4_187:} 本帖最后由 千羽 于 2022-11-14 19:50 编辑
刚上来，看到提醒，高高兴兴收礼来了{:4_187:} 朵拉这作业帖做得真美，同步精准，字的色调好漂亮{:4_187:} 问好朵拉，谢谢啦么么哒{:4_185:} 欣赏朵拉的精彩制作，背景图用的太好了{:4_199:} 同步也是做的很好了，朵拉好棒的{:4_171:} 千羽 发表于 2022-11-14 19:50
问好朵拉，谢谢啦么么哒
千羽收礼开心{:4_171:} 小辣椒 发表于 2022-11-14 20:24
千羽收礼开心
嗯，好开心啊{:4_205:} 千羽 发表于 2022-11-14 20:30
嗯，好开心啊
去看看冬雨今天的帖 歌也非常好听呢 朵拉制作漂亮的{:4_178:}
比冬雨强多了 很有创意的画面，赞！ 歌也好喜欢，朵拉好制作，真棒！ 问好！
小千羽收礼开心！
{:4_204:}{:4_199:} 小辣椒 发表于 2022-11-14 20:38
去看看冬雨今天的帖
看了{:4_173:}
页:
[1]
2