《狐言》改进版
本帖最后由 马黑黑 于 2022-12-25 20:23 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 721px); display: grid; place-items: center; width: 1280px; height: 800px; background: tan url('https://638183.freep.cn/638183/t22/animal/fox.webp') no-repeat center/cover; box-shadow: 6px 3px 20px #000; user-select: none; overflow: hidden; perspective: 3000px; opacity: .95; position: relative; z-index: 1; }
#papa::before, #papa::after {position: absolute;content: '';background: url('https://638183.freep.cn/638183/t22/animal/fox1.jpg') no-repeat center/cover;width: 200px;height: 200px;top: 4px;border-radius: 50%;filter: blur(1px) brightness(20%);box-shadow: 2px 4px 18px #000;}
#papa::after { width: 60px; height: 60px; top: calc(100% - 110px); left: 260px; filter: blur(0) brightness(100%) opacity(55%); }
</style>
<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=440796384.mp3" autoplay loop></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 15px; left: 50%; transform: translate(-50%)',player_css: 'bottom: 5px; left: 50%; transform: translate(-50%)',playerCode: `<style>#mplayer {--ww: 300px;--hh:100px;--state: paused;position: absolute;width: var(--ww);height: var(--hh);transform-style: preserve-3d;animation: rot3d 120s infinite linear;animation-play-state: var(--state);pointer-events: none;}.mline {position: absolute;width: 8px;height: 10px;bottom: 0;left: calc(50% - 4px);border-radius: 10px;transition: all .35s;opacity: .95;}.mline::before {position: absolute;content: '';width: 12px;height: 12px;left: calc(50% - 6px);background: var(--psecolor);border-radius: 50%;transition: all var(--ts);animation: up 1s infinite;animation-play-state: var(--state);}#btnMsg { position: absolute; color: snow; background: green; opacity: 0; border: 2px solid snow; border-radius: 8px; padding: 4px; transition: all .75s; cursor: pointer; z-index: 1001; }#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: hsl(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 rot3d { to { transform: rotateY(1turn); } }@keyframes up { to { top: -20px; } }</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, timerId;let total = Math.floor(mplayer.offsetWidth / 5), mRad = Math.floor(mplayer.offsetWidth / 2), tnow = Date.now();let isHover = (e,x,y,w,h) => e.offsetX > x && e.offsetX< x + w &&e.offsetY > y && e.offsetY < y + h;papa.onmousemove = (e) => {papa.style.cursor = isHover(e,mplayer.offsetLeft,mplayer.offsetTop,mplayer.offsetWidth,mplayer.offsetHeight+20) ? 'pointer' : 'default';clearTimeout(timerId);btnMsg.style.opacity = '.95';timerId = setTimeout('btnMsg.style.opacity = "0"',3000);};papa.onclick = (e) => {if(isHover(e,mplayer.offsetLeft,mplayer.offsetTop,mplayer.offsetWidth,mplayer.offsetHeight+20)) {aud.paused ? aud.play() : aud.pause();}};btnMsg.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();for (j = 0; j < total; j++) {let ele = document.createElement('span');ele.className = 'mline';ele.style.cssText += `background: linear-gradient(to bottom, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});transform: rotateY(${j*360/total}deg) translateZ(${mRad}px);--psecolor: linear-gradient(135deg, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});--ts: ${Math.random()}s;`;mplayer.appendChild(ele);}let lines = document.querySelectorAll('.mline');let update = () => {if(Date.now() - tnow > 65) {lines.forEach((item, key) => {let ph = aud.paused ? 0 : mplayer.offsetHeight;item.style.height = Math.random() * ph + 'px';});tnow = Date.now();}requestAnimationFrame(update);};update();aud.addEventListener('timeupdate', () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());document.addEventListener("fullscreenchange", () => {if(document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), mplayer.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'), mplayer.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);};};mkPlayer.HCPlayer = playCode;})(this);
let ar = [,,];
HCPlayer({
lrcAr: ar,
lrc_css: 'left: 25px; top: 15px; --bg: linear-gradient(180deg,hsla(120,100%,50%,.35),hsla(120,50%, 35%,.65));',
player_css: '--ww:400px; --hh: 100px; left: 100px; bottom: 80px;',
});
})();
</script>
代码
<style>
#papa { margin: 0 0 0 calc(50% - 721px); display: grid; place-items: center; width: 1280px; height: 800px; background: tan url('https://638183.freep.cn/638183/t22/animal/fox.webp') no-repeat center/cover; box-shadow: 6px 3px 20px #000; user-select: none; overflow: hidden; perspective: 3000px; opacity: .95; position: relative; z-index: 1; }
#papa::before, #papa::after {position: absolute;content: '';background: url('https://638183.freep.cn/638183/t22/animal/fox1.jpg') no-repeat center/cover;width: 200px;height: 200px;top: 4px;border-radius: 50%;filter: blur(1px) brightness(20%);box-shadow: 2px 4px 18px #000;}
#papa::after { width: 60px; height: 60px; top: calc(100% - 110px); left: 260px; filter: blur(0) brightness(100%) opacity(55%); }
</style>
<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=440796384.mp3" autoplay loop></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 15px; left: 50%; transform: translate(-50%)',player_css: 'bottom: 5px; left: 50%; transform: translate(-50%)',playerCode: `<style>#mplayer {--ww: 300px;--hh:100px;--state: paused;position: absolute;width: var(--ww);height: var(--hh);transform-style: preserve-3d;animation: rot3d 120s infinite linear;animation-play-state: var(--state);pointer-events: none;}.mline {position: absolute;width: 8px;height: 10px;bottom: 0;left: calc(50% - 4px);border-radius: 10px;transition: all .35s;opacity: .95;}.mline::before {position: absolute;content: '';width: 12px;height: 12px;left: calc(50% - 6px);background: var(--psecolor);border-radius: 50%;transition: all var(--ts);animation: up 1s infinite;animation-play-state: var(--state);}#btnMsg { position: absolute; color: snow; background: green; opacity: 0; border: 2px solid snow; border-radius: 8px; padding: 4px; transition: all .75s; cursor: pointer; z-index: 1001; }#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: hsl(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 rot3d { to { transform: rotateY(1turn); } }@keyframes up { to { top: -20px; } }</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, timerId;let total = Math.floor(mplayer.offsetWidth / 5), mRad = Math.floor(mplayer.offsetWidth / 2), tnow = Date.now();let isHover = (e,x,y,w,h) => e.offsetX > x && e.offsetX< x + w &&e.offsetY > y && e.offsetY < y + h;papa.onmousemove = (e) => {papa.style.cursor = isHover(e,mplayer.offsetLeft,mplayer.offsetTop,mplayer.offsetWidth,mplayer.offsetHeight+20) ? 'pointer' : 'default';clearTimeout(timerId);btnMsg.style.opacity = '.95';timerId = setTimeout('btnMsg.style.opacity = "0"',3000);};papa.onclick = (e) => {if(isHover(e,mplayer.offsetLeft,mplayer.offsetTop,mplayer.offsetWidth,mplayer.offsetHeight+20)) {aud.paused ? aud.play() : aud.pause();}};btnMsg.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();for (j = 0; j < total; j++) {let ele = document.createElement('span');ele.className = 'mline';ele.style.cssText += `background: linear-gradient(to bottom, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});transform: rotateY(${j*360/total}deg) translateZ(${mRad}px);--psecolor: linear-gradient(135deg, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});--ts: ${Math.random()}s;`;mplayer.appendChild(ele);}let lines = document.querySelectorAll('.mline');let update = () => {if(Date.now() - tnow > 65) {lines.forEach((item, key) => {let ph = aud.paused ? 0 : mplayer.offsetHeight;item.style.height = Math.random() * ph + 'px';});tnow = Date.now();}requestAnimationFrame(update);};update();aud.addEventListener('timeupdate', () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());document.addEventListener("fullscreenchange", () => {if(document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), mplayer.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'), mplayer.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);};};mkPlayer.HCPlayer = playCode;})(this);
let ar = [,,];
HCPlayer({
lrcAr: ar,
lrc_css: 'left: 25px; top: 15px; --bg: linear-gradient(180deg,hsla(120,100%,50%,.35),hsla(120,50%, 35%,.65));',
player_css: '--ww:400px; --hh: 100px; left: 100px; bottom: 80px;',
});
})();
</script>
本帖最后由 马黑黑 于 2022-12-25 20:32 编辑
改进内容：
一、全屏功能集成到了插件，无需在帖子代码中加入额外的处理机制；
二、频谱的动作更为顺滑欢快，较为接近响应式效果（但不会达到那个效果）；
三、频谱的点击操作提升了友好性（原帖存在的问题：① 因频谱做3d旋转，某个角度下（比如 rotateY 到90度时）且处于暂停时，原先的机制只有点击小球才能有效操作；② 多数情况下，频谱旋转时，两根频谱之间出现因存在空隙而可能会操作无效） 哈，黑黑把全屏也一起封装了啊，这样需要调整的就更少了{:4_187:} 红影 发表于 2022-12-25 21:32
哈，黑黑把全屏也一起封装了啊，这样需要调整的就更少了
不过这里是固定封装，不修改插件的话默认的位置、样式等就那个样子 频谱的操作的确更顺畅了，黑黑真棒{:4_187:} 红影 发表于 2022-12-25 21:35
频谱的操作的确更顺畅了，黑黑真棒
必须使用 requestAnimationFrame 驱动频谱，还有适当降速，还要 transition 配合 马黑黑 发表于 2022-12-25 21:34
不过这里是固定封装，不修改插件的话默认的位置、样式等就那个样子
不改变插件可以更省力啊，何乐而不为{:4_173:} 马黑黑 发表于 2022-12-25 21:37
必须使用 requestAnimationFrame 驱动频谱，还有适当降速，还要 transition 配合
原来这里面调整的东西还不少呢。黑黑辛苦了{:4_187:} 红影 发表于 2022-12-25 21:44
原来这里面调整的东西还不少呢。黑黑辛苦了
玩玩不辛苦，没有辛苦可言 红影 发表于 2022-12-25 21:44
不改变插件可以更省力啊，何乐而不为
有些需求会是个性化的 马黑黑 发表于 2022-12-25 21:48
玩玩不辛苦，没有辛苦可言
黑黑很有钻研精神{:4_199:} 马黑黑 发表于 2022-12-25 21:49
有些需求会是个性化的
要想省力，就别个性了呗{:4_173:} 红影 发表于 2022-12-25 22:45
要想省力，就别个性了呗
插件可以提供全屏设置参数，不过这个不打算收入小集合，所以没做。懂的就去插件找 #btnMsg 设置一下位置和 background 颜色，还有令哪一个元素全屏的 JS 设置 红影 发表于 2022-12-25 22:44
黑黑很有钻研精神
我只是玩 俺来看“热闹”。 马黑黑 发表于 2022-12-26 08:38
插件可以提供全屏设置参数，不过这个不打算收入小集合，所以没做。懂的就去插件找 #btnMsg 设置一下位置 ...
饿呢，这个对比一下之前没封装的，应该不难。 马黑黑 发表于 2022-12-26 08:38
我只是玩
玩的有水平有技巧{:4_199:} 红影 发表于 2022-12-26 15:28
玩的有水平有技巧
不一定，玩嘛，多数是随性的，并无计划，方向不固定也不一定明确 红影 发表于 2022-12-26 15:28
饿呢，这个对比一下之前没封装的，应该不难。
确实不难的