蓝眼睛（学习hsl颜色调配）
<style>#papa { left: -214px; width: 1024px; height: 640px; background: url('https://pic1.imgdb.cn/item/633ae25c16f2c2beb15a0083.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
#papa::before { position: absolute; content: ''; width: 700px; height: 495px;right:0px;top:0px;background:url('https://www.huachaowang.com/data/attachment/forum/202210/03/190218mfovkul5mxl8fzzf.jpg') no-repeat center/cover; opacity: 0.50; clip-path: polygon(0% 28%, 22% 18%, 30% 0%, 100% 0%, 100% 75%, 0% 75%); mix-blend-mode: darken; }
#mplayer { position: absolute; bottom: 0; width: 300px; height: 80px; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { background: linear-gradient(to top right, hsla(240,0%,50%,.6), hsla(240,100%,40%,.5)); border-radius: 50%; opacity: .75; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .7s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border-radius: 6px; opacity: 0; }
#btnplay { width: 20px; height: 20px; transform: translateX(3px); background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { --yy: 20px; width: 300px; height: 16px; border-radius: 8px; background: linear-gradient(90deg, hsla(0,0%,0%,.65), hsla(240,100%,50%,.8) 100%, hsla(0,0%,100%,.45) 0); border: 1px solid hsla(0,0%,100%,.45); font: normal 14px / 16px sans-serif; color: hsl(180, 60%,50%); }
#lrc { --motion: cover1; --tt: 2s; --state: paused; position: absolute; bottom: 120px; font: bold 2.4em sans-serif; color: hsl(240,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(240,100%,75%,.95)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(0,0%,0%,.95),hsla(240,100%,50%,.75)); 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%; } }
#fengye { position: absolute; left:-120px; top:0px; opacity: 0.40; }
</style>
<div id="papa">
<div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
<img id="fengye" src="https://pic1.imgdb.cn/item/633af14e16f2c2beb178c87a.gif" alt="" />
</div>
<script>
let mKey = 0, mSeek = false, mFlag = true, aud = new Audio();
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
aud.src = 'https://music.163.com/song/media/outer/url?id=1328317104.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.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.style.background= 'linear-gradient(90deg, hsla(0,0%,0%,.65), hsla(240,100%,50%,.8) ' + aud.currentTime / aud.duration * 100 + '%, hsla(0,0%,100%,.45) 0)';prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr) {if(mKey === j) showLrc(lrcAr);else continue;}}});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', 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> 借黑黑一个眼睛的图片，再把s数值改成240，OK，完活。@马黑黑 收作业{:4_187:} 红影 发表于 2022-10-3 22:49
借黑黑一个眼睛的图片，再把s数值改成240，OK，完活。@马黑黑 收作业
是 h 数值，只有 h 色相才能用 240 这么大的数字，它从 0 到 360 间取值。s 是饱和度，l 是亮度，取值均在 0% - 100% 之间。 蓝色系搭配背景图还不错。一个小问题是，帖子左上角有割裂痕迹。 枫叶飘落效果非常好{:4_199:}{:4_199:} 蓝眼睛看着干涸的土地也很无奈。 马黑黑 发表于 2022-10-3 22:51
是 h 数值，只有 h 色相才能用 240 这么大的数字，它从 0 到 360 间取值。s 是饱和度，l 是亮度，取值均 ...
哈哈，记错了，原来h才是色相，因为s和颜色的发音一样，就弄错，呵呵，我标题里也写错了，我去改改{:4_173:} 马黑黑 发表于 2022-10-3 22:53
蓝色系搭配背景图还不错。一个小问题是，帖子左上角有割裂痕迹。
没办法啊，谁让你那眼睛的图图太小，没法满布。我都把透明调很低了，还是能看得出那条边{:4_173:} 阙歌 发表于 2022-10-4 00:01
枫叶飘落效果非常好
谢谢阙歌，跟着黑黑学习颜色配色呢{:4_173:} 梦油 发表于 2022-10-4 09:27
蓝眼睛看着干涸的土地也很无奈。
图片从黑黑那直接“借”的，省得自己去找图了{:4_189:} 红影 发表于 2022-10-4 16:40
没办法啊，谁让你那眼睛的图图太小，没法满布。我都把透明调很低了，还是能看得出那条边
我那是演示用的小图 红影 发表于 2022-10-4 16:39
哈哈，记错了，原来h才是色相，因为s和颜色的发音一样，就弄错，呵呵，我标题里也写错了，我去改改{:4_17 ...
错点正常 马黑黑 发表于 2022-10-4 17:05
我那是演示用的小图
正好找到这歌，一下子想起你的眼睛了，毫不犹豫就放进了图里{:4_189:} 马黑黑 发表于 2022-10-4 17:05
错点正常
这三个字母，我去对应汉字的色灰亮的首字母了，结果第一二和英语是反的{:4_189:} 红影 发表于 2022-10-4 17:40
这三个字母，我去对应汉字的色灰亮的首字母了，结果第一二和英语是反的
我都把单词写出来的，h 就是 hue，s 就是 saturation，l 就是 light，几个小学英语的单词 红影 发表于 2022-10-4 17:38
正好找到这歌，一下子想起你的眼睛了，毫不犹豫就放进了图里
我的眼睛可没这么大（当然也不小） 红影 发表于 2022-10-4 16:41
图片从黑黑那直接“借”的，省得自己去找图了
画面很有特点。 好手艺，影子真聪明，一学就会。。{:4_199:}{:4_199:} 欣赏、学习！
带孙、做家务太忙，上来学习的时间很少，做作业的时间就更难挤出来了！ 感觉蓝眼睛用遮罩处理比路径剪裁看起来多顺眼（仅个人喜欢）