广袤天地
本帖最后由 马黑黑 于 2022-9-25 07:51 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 640px; background: url('/data/attachment/forum/202209/25/072505jvpqdny33qoxvhoo.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; overflow: hidden; position: relative; z-index: 1; }
#mplayer { position: absolute; right: 40px; bottom: 0; width: 300px; height: 80px; user-select: none; 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, teal, black); border-radius: 50%; opacity: .55; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .5s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid tan; 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: 10px; background: linear-gradient(90deg, teal, black 100%, transparent 0); border: 1px solid teal; font: normal 14px / 16px sans-serif; color: #ccc; text-shadow: 1px 1px 1px #000; opacity: .65; }
#lrc { position: absolute; top: 20px; font: 900 2.4em 'FangSong',sans-serif; color: transparent; background: linear-gradient(-90deg, skyblue, snow) 0 0 / 200% 200%; filter: drop-shadow(2px 2px 4px #000); -webkit-background-clip: text; }
#mpic {position: absolute; transform: rotateY(180deg); left: 0; top: 0; width: 60px; offset-distance: 0; offset-path: path("M 0 0 Q 300 90, 512 100 T 1024 30"); animation: move 18s linear infinite;}
@keyframes bgMove1 { to { background-position: -100% 0; } }
@keyframes bgMove2 { to { background-position: -100% 0; } }
@keyframes move { to { offset-distance: 100%; } }
</style>
<div id="papa">
<img id="mpic" alt="" src="/data/attachment/forum/202209/25/072652ckuqwlat7wqk6o6z.gif" />
<span id="lrc" data-text="花潮lrc在线">花潮lrc在线</span>
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>
<script>
let mKey = 0, mFlag = true, aud = new Audio();
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
aud.src = 'https://music.163.com/song/media/outer/url?id=1978686514.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,teal, black ' + aud.currentTime / aud.duration * 100 + '%, snow 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.animationPlayState = 'paused') : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.animationPlayState = 'running');
let showLrc = (time) => {lrc.style.animation = (mFlag ? 'bgMove1 ' : 'bgMove2 ') + time + 's linear forwards';lrc.innerHTML = lrcAr;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 mtime = lrcAr - (aud.currentTime - lrcAr);showLrc(mtime);};
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>
本帖最后由 马黑黑 于 2022-9-25 08:05 编辑
此帖尝试一下lrc歌词字体。之前，一直使用 sans-serif 字体家族，Windows下会默认使用微软雅黑。
宋体、新宋体、仿宋、楷体、黑体、微软雅黑、微软正黑体都是Windows内置的字体，也全都是中国人制作的字体（微软的字体委托北大方正制作，微软保留产权，非商业应用不用考虑可能引发的纠纷）。隶书需要额外安装，安装有office之后会自动拥有隶书字体（我的机器没有安装office）。
其实更好看的字体多了去，如全免费的思源字体、阿里为淘宝天猫打造的普惠体，都更优秀，但这些字体一般系统不会自带，需要额外安装。 笔画不够粗壮的字体，在HTML环境下，不合适镂空。原因：CSS 的 text-stroke 的描边功能会挤占笔画的内边沿，笔画的里边空间会被压缩，严重之时连内部空间都没有，镂空后 text-fill-color 可能会没有操作空间。
默认字体中，黑体的笔画算是比较粗的，但和微软雅黑比还是显得偏细，镂空的效果一般，除非将字体设得很大。
可能正是由于存在对字体的适应问题，2013年就已经进入测试的 text-stroke 属性，一直未能转正。 马黑黑 发表于 2022-9-25 08:02
此帖尝试一下lrc歌词字体。之前，一直使用 sans-serif 字体家族，Windows下会默认使用微软雅黑。
宋体、 ...
“sans-serif 字体家族，Windows下会默认使用微软雅黑。”
雅黑的字体也不错，就冲这名儿就好，和黑黑是一个家族的{:4_173:} 红影 发表于 2022-9-25 09:17
“sans-serif 字体家族，Windows下会默认使用微软雅黑。”
雅黑的字体也不错，就冲这名儿就好，和黑黑 ...
{:4_172:} 这小飞机飞得笃悠悠的，好自在{:4_187:} 这个歌词很奇特，听后说不上什么感觉。。。 红影 发表于 2022-9-25 10:09
这个歌词很奇特，听后说不上什么感觉。。。
歌词很不错的 马黑黑 发表于 2022-9-25 10:47
歌词很不错的
是的，歌词很值得回味。 红影 发表于 2022-9-25 11:03
是的，歌词很值得回味。
祁紫檀作为一名创作型歌手，感觉是有功力的，也有潜力。 马黑黑 发表于 2022-9-25 11:09
祁紫檀作为一名创作型歌手，感觉是有功力的，也有潜力。
去搜了一下，这首是她自己的词曲呢，很有内涵的一位歌手{:4_204:} 我电脑有安装office，隶书可以看见的
黒黑这架是歼击机吗，漂亮{:4_173:} 今天外面混一天，晚上要迟一点回家，报告黑神，我今天这个作业完不成了，这架小飞机很喜欢，必须玩一下 小辣椒 发表于 2022-9-25 12:47
今天外面混一天，晚上要迟一点回家，报告黑神，我今天这个作业完不成了，这架小飞机很喜欢，必须玩一下
飞机原始尺寸比这个大，可以放大一点 红影 发表于 2022-9-25 11:37
去搜了一下，这首是她自己的词曲呢，很有内涵的一位歌手
是的 小辣椒 发表于 2022-9-25 12:45
我电脑有安装office，隶书可以看见的
黒黑这架是歼击机吗，漂亮
嗯，配合地面部队准备发起攻击 马黑黑 发表于 2022-9-25 08:15
笔画不够粗壮的字体，在HTML环境下，不合适镂空。原因：CSS 的 text-stroke 的描边功能会挤占笔画的内边沿 ...
是的，有时候自己设置的字体只是你自己电脑看见这个效果，别人电脑看见不是这种效果的，以前做swf播放器，明明我做的字体别人看见不一样，开始我不明白，后来晓得，字体要自己电脑有才会显示这个效果 小辣椒 发表于 2022-9-25 12:55
是的，有时候自己设置的字体只是你自己电脑看见这个效果，别人电脑看见不是这种效果的，以前做swf播放器 ...
而且不同的系统，内置的字体也不一样。但这几个都有：宋体，新宋体，黑体，Windows下肯定还有微软雅黑 2022-9-25 12:51
马黑黑 发表于 2022-9-25 12:55
嗯，配合地面部队准备发起攻击
那最好做的时候画面有全副武装的地面部队{:4_170:}