【感谢贴】（星空二）贴赠：马黑黑、红影、小辣椒
本帖最后由 雨中悄然 于 2023-2-7 20:20 编辑 <br /><br /><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1790851"><style>
#papa { margin: 0 0 0 calc(50% - 593px);; display: grid; place-items: center; width: 1024px; height: 640px; background: gray url('https://pic.imgdb.cn/item/63e241f14757feff3386c15c.jpg') no-repeat center/cover; box-shadow: 8px 4px 20px #000; overflow: hidden; user-select: none; position: relative; perspective: 3000px; z-index: 1; }
.ship { position: absolute; width: 1300px; height: 750px; object-fit: cover; opacity: .98; clip-path: circle(90% at bottom) ;mix-blend-mode: screen;}
#dt1{ position: absolute; width: 459px; height: 241px; top: 382px; left: 810px; }
#dt2{ position: absolute; width: 120px; height: 71px; top: 550px; left: 450px; }
@keyframes rot1 { to { transform: rotate(5deg); } }
@keyframes rot2 { from { transform: rotate(-15deg) scale(1); } to { transform: rotate(15deg) scale(1.5); } }
@keyframes opa { from { opacity: 0; } to { opacity: .55; } }
</style>
<div id="papa">
<video class="ship"
src="https://img.tukuppt.com/video_show/2269348/00/02/01/5b4ef6861999e.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29470947.mp3" loop autoplay></audio>
<script >
(function(mkPlayer) {let defaults = {lrcAr: [ ],lrc_css: 'top: 20px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: calc(50% - var(--ww) / 2);', total: 20,playerCode: `<style>#mplayer {--ww: 200px;--bg: linear-gradient(180deg,gold,lightblue,yellow);--bc: #000;position: absolute;width: var(--ww);height: var(--ww);display: grid;place-items: center;transform: rotateZ(15deg);transform-style: preserve-3d;animation: rot 10s infinite linear;cursor: pointer;}.mline {width: var(--ww);height: var(--ww);border-radius: 50%;border: 1px dotted var(--bc);background: var(--bg);position: absolute;opacity: .75;}#btnMsg { position: absolute; color: snow; background: red; opacity: 0; border: 2px solid snow; border-radius: 8px; padding: 4px; transition: all .75s; cursor: pointer; z-index: 901; }#lrc { --motion: cover2; --tt: 1s; --state: running; --bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65)); position: absolute; font: bold 2.4em sans-serif; color: blue(100, 100%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); z-index: 900; }#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }@keyframes cover1 { from { width: 0; }to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }@keyframes rot { to { transform: rotateZ(15deg) rotateY(1turn); } }</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"></div><span id="btnMsg">全屏观赏</span>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, fs = false, msize = mplayer.offsetWidth, tnow = Date.now(), timerId;;[...Array(data.total).keys()].forEach( (item,key) => {item = document.createElement('span');item.className = 'mline';item.style.transform= `rotateX(${360/data.total*key}deg) rotateY(${360/data.total*key}deg)`;mplayer.appendChild(item);});mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();btnMsg.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();papa.onmousemove = (e) => {clearTimeout(timerId);btnMsg.style.opacity = '.95';timerId = setTimeout('btnMsg.style.opacity = "0"', 3000);};document.addEventListener("fullscreenchange", () => {if (document.fullscreenElement !== null) {fs = true;mplayer.style.setProperty('--ww', msize*1.5 + 'px');btnMsg.innerText = '退出全屏';} else {fs = false;mplayer.style.setProperty('--ww', msize + 'px');btnMsg.innerText = '全屏观赏';}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'), mplayer.style.animationPlayState='paused') : (lrc.style.setProperty('--state','running'), mplayer.style.animationPlayState='running');aud.addEventListener('timeupdate', () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {if (mKey === j) showLrc(data.lrcAr);else continue;}}});let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');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 < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
HCPlayer({
lrcAr: lrcAr,
lrc_css: '--bg: linear-gradient(hsla(210,80%,60%,.7),hsla(216,70%,40%,.5)); top: 580px;',
player_css: '--ww: 160px; --bg: linear-gradient(180deg,MediumBlue,blue,CornflowerBlue,AliceBlue); --bc: transparent; top: 280px; left: 460px;',
total: 20,
});
</script>
<br></div><br><br><br><br><br><br><br><br><br></td></tr></table> 本帖最后由 雨中悄然 于 2023-2-2 21:09 编辑
来欢乐水吧十天左右，跟贴子代码死磕十天左右，来个小结：
（一）做贴子无知者无畏的疯狂阶段：看了黑老师小兔跳帖子，觉得旋转的播放器挺好看，就要了代码想折腾一个。小白的想法是，图片，视频，播放器一起来。全屏不要，歌词不要。最疯狂的想法是试图剥离歌词和全屏。可想而知，碰的头破血流，无果。后来才知道这些是老师封装好的插件，神厨才能炒好的菜。
可是帖子还要做：
不会用代码让播放器转起来，就把动画扣出来，加个喷火特效，做一张背景，给我转。。歌是没有词的，不会用代码唱，用刚学的论坛发歌的方法隐了播放器，给我唱。。图片加视频，加个最土的播放器。就是星空一。纯粹的代码小白，因为没做好，哭哭啼啼写了一份检查。
（二）老老实实代码描红阶段：先描红的是联播歌曲，做了个周深专辑，好听的不要不要的。跑坛子书房翻教程才发现，插件啊，都封好的呢。有点意识到自己前两天疯的有点严重。这个帖子做的时候顺便学了找网易音乐地址。
再描红的是雪落下的声音，主要学的是歌词同步。歌词同步很麻烦，好在老师有在线同步编辑，这个自己就找到了。还乐颠颠找了个觉得顶好看的示范贴，做好后才知道这个半年前的，现在早更新了。傻眼
（三）老师带着跑的阶段：马黑黑老师对初学者表现出极大耐心。跟帖《山鬼》做出【仰望】贴子，学会了更改播放器位置；跟《琴师》出了【远方】帖子，学会了更改播放器颜色；跟着《天荒》出了【如愿】帖子，学会了新版歌词同步，加上我念念已久的三合一。至此我最初想要的效果已经呼之欲出。
帖子框架算是搭出来了。接下来跟学《舞毕》帖子，学了新的播放器，调整高低。今天老师又出《借我》出来图片播放器……
今天做谢贴，得空再跟学~~
本帖最后由 雨中悄然 于 2023-2-2 21:08 编辑
今天重新回去做第一个帖子，【星空】。代码完成旋转，完成歌词同步。
色彩回归星空本色，不再是不会改颜色时科幻式的红色背景。
本帖最后由 雨中悄然 于 2023-2-2 21:11 编辑
感谢马@马黑黑 满满的心意，在学习路上的引导，自己博学，专注一件事就整到极致，玩也是一样，学生实在佩服。还超级有耐心，教程细致的像手把手在教，超级小白居然看完能整出一个帖子来。真是一个超级好的人呐，你这么好，怎么办。
感谢@红影 ，我每次出帖子都战战兢兢，你一直跟在身边鼓励着我，夸着我，晕乎乎就过了这么多天，瞧，你夸着夸着我就进步了。
感谢@小辣椒 ，你的帖子我看了不少，更改的地方也偷偷搬了不少，对我不成熟的帖子表现出极大耐心，花样夸表扬，同时有问必答，耐心指导。 本帖最后由 雨中悄然 于 2023-2-2 21:12 编辑
此贴送给我学习代码音画贴集训十天给我帮助最大的三位老师朋友。
@马黑黑 @红影 @小辣椒 今天必须整出来，接下来上班了~~你懂的。哈哈哈哈{:4_170:} 艾特两次都不成功。。。新手上路，处处路不平{:4_173:}啊 @马黑黑@红影@小辣椒 有管管在吗，帮我删6楼，9楼艾不成功的{:4_173:} 这个颜色漂亮看着二块多了{:4_189:} 绿叶清舟 发表于 2023-2-2 21:19
这个颜色漂亮看着二块多了
{:4_170:}哎。。。。一言难尽 雨中悄然 发表于 2023-2-2 21:21
哎。。。。一言难尽
上次那个玩久烫手了吧{:4_189:} 绿叶清舟 发表于 2023-2-2 21:27
上次那个玩久烫手了吧
整不出来就想起个名字叫暖手炉算了。别叫星空了{:4_170:} 这个带着玄幻的感觉，真的是美极了。悄然太棒了{:4_199:} 雨中悄然 发表于 2023-2-2 21:16
有管管在吗，帮我删6楼，9楼艾不成功的
不用删啊，看着艾特不成功，实际我这里收到提示的呢{:4_173:} 红影 发表于 2023-2-2 21:30
这个带着玄幻的感觉，真的是美极了。悄然太棒了
我总算可以把这个翻出来重做了{:4_170:} 雨中悄然 发表于 2023-2-2 20:58
感谢马@马黑黑 满满的心意，在学习路上的引导，自己博学，专注一件事就整到极致，玩也是一样，学生实在佩服 ...
哈哈，没看出来你战战兢兢的，你的图图本身就做得好看，加上黑黑的代码，如鱼得水，只看到你玩得潇洒自如，俾睨天下的样子{:4_170:} 红影 发表于 2023-2-2 21:31
不用删啊，看着艾特不成功，实际我这里收到提示的呢
好吧，我想说刚跟你学了一招到我手里就不好使{:4_170:} 这个制作越看越喜欢，等不及小辣椒来加精，我来越俎代庖了吧{:4_173:}