在路上 to 辫子哥哥 感谢辫子哥哥好礼
<style>#papa { margin: 120px 0 0 calc(50% - 681px); position: relative; width: 1200px; height: 640px; overflow: hidden; background: #0b1a3a; box-shadow: 8px 4px 32px 0 hsla( 0,0%,0%,.72); user-select: none; }
#tu { position: absolute; width: 1200px;left: 0px; top: 0px;opacity: 1; }
#tit {position: absolute; left: -60px; bottom: 40px; background-image:url('https://pic.imgdb.cn/item/638c8dfb16f2c2beb1a3b001.gif'); background-size:cover; width:800px; height:200px; font: bold 5.2em serif; text-align:center; line-height:200px; color:transparent; -webkit-background-clip:text; border:0px #FF4A20 solid; z-index: 10; }
.vid { position: absolute; width: 1200px; height: 695px; top: 45px; right:0px; object-fit: cover; opacity: .58; mix-blend-mode: screen;}
#yinfu { position: absolute; right: 420px; top: 40px;opacity: 0.3; }
#yan {position: absolute; left: -60px; top: 0px; background-image:url('https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif'); width:451px; height:249px; opacity: 0.6; }
</style>
<div id="papa">
<img id="tu" src="http://image.hnol.net/c/2017-06/08/13/201706081305355171-2127595.jpg" alt="" />
<img id="yinfu" src="https://pic1.imgdb.cn/item/638cc5ea16f2c2beb1c9e0e1.gif" alt="" />
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/23/5b52e6295a4ca.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div id="tit">在 路 上</div><div id="yan"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=28987543.mp3" loop autoplay></audio>
</div>
<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 15px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 0; left: 50%; transform: translateX(-50%);',num: 3,playerCode: `<style>#mplayer {position: absolute;display: grid;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 8px 2px;place-items: end center;color: var(--color);font: normal 16px sans-serif;padding-bottom: 20px;z-index: 999;--ww: 260px;--btn_size: 30px;--color: hsla(0,0%,100%,.75);--track: hsla(90,100%,95%,.65);--prog: linear-gradient(90deg,hsla(90,30%,50%,.55),hsla(280,40%,50%,.75),hsla(30,100%,50%,.65));}#cur { grid-area: cur; color: var(--color); }#dur { grid-area: dur; color: var(--color); }#btnplay {--state: paused;position: absolute;grid-area: btnplay;width: var(--btn_size);height: var(--btn_size);bottom: 6px;animation: rot linear 3s infinite;animation-play-state: var(--state);cursor: pointer;}#btnplay > span {position: absolute;width: 50%;height:50%;border-radius: 0 100%;background: var(--color);transform-origin: 100% 100%;}#prog {--xx: 0px;grid-area: prog;width: var(--ww);height: 4px;background: var(--track);position: relative;display: grid;place-items: center;border-radius: 4px;}#prog::before, #prog::after { position: absolute; content: ''; }#prog::before {left: 0;width: var(--xx);height: 100%;border-radius: 6px;background: var(--prog);border-radius: 4px;}#prog::after {left: calc(var(--xx) - 12px);opacity: .85;width: 16px;height: 16px;background: radial-gradient(transparent 2px, teal 0, black);border-radius: 50%;cursor: pointer;}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(70, 50%, 50%, .45), hsla(190, 80%, 50%, .75));position: absolute;font: bold 2.0em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 1px hsla(120, 100%, 35%, .75));z-index: 1000;}#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: rotate(1turn); } }</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="cur">00:00</span><span id="dur">00:00</span></div>`,};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, mDrag = false;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();aud.addEventListener('timeupdate', () => {cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);if(mDrag===false) prog.style.setProperty('--xx', aud.currentTime * prog.offsetWidth / aud.duration + 'px');for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());prog.onmousedown = () => mDrag = true;document.onmouseup = () => mDrag = false;mplayer.onmouseup = (e) => { if(mDrag) aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth; };mplayer.onmousemove = (e) => { if(mDrag) moveBar(e.offsetX); };let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--state', 'paused')): (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--state', 'running'));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);};let moveBar = (x) => {if(x < 0) x = 0;if(x > prog.offsetWidth - 5) x = prog.offsetWidth - 5;prog.style.setProperty('--xx', x + 'px');};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;};(function(num) {for(j = 0; j<num; j++) {let ele = document.createElement('span');ele.style.transform = `rotate(${j*360/num}deg)`;btnplay.appendChild(ele);}})(data.num);};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
HCPlayer({
lrcAr: lrcAr,
lrc_css: '--bg: linear-gradient(hsla(105,28%,71%,.35),hsla(105,28%,42%,.65)); bottom: 20px; left: 560px;color: hsla(76,100%,22%,.45);',
player_css: '--prog: linear-gradient(90deg,green,orange,red); bottom: 10px; left: 200px; --color: hsla(76,100%,16%,.55); --ww: 260px; --hh: 8px;--btn_size: 30px; --track: snow;',
num: 6,
});
})();
</script> 学做了个黑黑27号效果，真好收到辫子的礼物，就用这个作业来还礼吧。再次感谢辫子哥哥的礼物{:4_187:} 红影 发表于 2022-12-8 19:54
学做了个黑黑27号效果，真好收到辫子的礼物，就用这个作业来还礼吧。再次感谢辫子哥哥的礼物
不用还礼，你一定要还，那就不客气了，我替黑总批改作业{:4_170:}
100√ 优秀作业@马黑黑
黑总我替批改了{:4_170:} 辫子哥哥 发表于 2022-12-8 20:02
100√
这是是百分制{:4_173:} 辫子哥哥 发表于 2022-12-8 20:03
优秀作业@马黑黑
黑总我替批改了
你可以全权处理 路上，飘着金粉银球，挺好的{:4_170:} 马黑黑 发表于 2022-12-8 20:04
这是是百分制
白天问了老师，一般作业按常规100分计算比较合理，当然黑总是高要求1000分的，这些学生达不到{:4_170:} 辫子哥哥 发表于 2022-12-8 20:01
不用还礼，你一定要还，那就不客气了，我替黑总批改作业
正好做了个帖子，顺手还礼，没你那样的歌喉，只能找个歌曲了，别嫌简陋{:4_173:} 辫子哥哥 发表于 2022-12-8 20:02
100√
又是这么高分啊{:4_189:} 马黑黑 发表于 2022-12-8 20:06
路上，飘着金粉银球，挺好的
路上全是宝啊，这就是为什么人们喜欢在路上{:4_173:} 红影 发表于 2022-12-8 20:13
路上全是宝啊，这就是为什么人们喜欢在路上
是这个道理 辫子哥哥 发表于 2022-12-8 20:07
白天问了老师，一般作业按常规100分计算比较合理，当然黑总是高要求1000分的，这些学生达不到
对的，六好学生才用千分制 这黄沙漫漫的做得真好。 马黑黑 发表于 2022-12-8 20:33
是这个道理
等感到目的地，收获满满{:4_173:} 梦油 发表于 2022-12-8 20:39
这黄沙漫漫的做得真好。
好像黄沙有点大了{:4_173:} 红影 发表于 2022-12-8 21:25
等感到目的地，收获满满
{:4_181:} 辫子哥哥 发表于 2022-12-8 20:01
不用还礼，你一定要还，那就不客气了，我替黑总批改作业
{:4_170:}
越权 这个播放器也是漂亮，特别滚动条{:4_199:}