梦
本帖最后由 马黑黑 于 2022-12-26 10:29 编辑 <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/webp/dream.webp') no-repeat center/cover; box-shadow: 6px 3px 20px #000; user-select: none; overflow: hidden; perspective: 2000px; opacity: .95; position: relative; z-index: 1; }
#papa::before, #papa::after {position: absolute;content: '';background: inherit;width: 200px;height: 200px;left: 20px; top: 4px;border-radius: 50%;filter: blur(1px) brightness(120%);box-shadow: 2px 4px 18px #000;}
#papa::after { width: 100px; height: 100px; top: calc(100% - 130px); left: 250px; filter: blur(0) brightness(200%) opacity(55%); }
</style>
<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=409654241.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: 'top: 40px; left: 240px; --bg: linear-gradient(180deg,hsla(0,0%,20%,.35),hsla(20,2%, 15%,.75)); color: snow;',
player_css: '--ww:460px; --hh: 100px; left: 100px; bottom: 80px;',
});
})();
</script> 欣赏黑黑老师精彩制作！{:4_204:} 亦是金 发表于 2022-12-26 09:28
欣赏黑黑老师精彩制作！
这个对音乐没有跨域要求 乐曲欢快活泼，很好听。 梦油 发表于 2022-12-26 09:57
乐曲欢快活泼，很好听。
这是欢愉的梦。愿大家梦想成真 马黑黑 发表于 2022-12-26 10:38
这是欢愉的梦。愿大家梦想成真
黑黑先生的祝福，一定会给大家带来好运。 梦油 发表于 2022-12-26 10:39
黑黑先生的祝福，一定会给大家带来好运。
{:5_108:} 水晶梦，天鹅梦，求偶梦。
你们请，没俺啥事{:4_334:} 这个环形立体频谱播放器也如喷泉一样起伏，这个制作真美{:4_187:} 这个是环形播放器封装后的具体实例吧，漂亮{:4_187:} 五彩喷泉之梦，梦幻无边{:4_187:} 樵歌 发表于 2022-12-26 13:39
水晶梦，天鹅梦，求偶梦。
你们请，没俺啥事
你确定不求求？梦里不求白不求{:5_106:} 红影 发表于 2022-12-26 14:17
这个环形立体频谱播放器也如喷泉一样起伏，这个制作真美
全屏后，整体的立体观感很强烈 红影 发表于 2022-12-26 14:20
五彩喷泉之梦，梦幻无边
{:4_181:} 红影 发表于 2022-12-26 14:18
这个是环形播放器封装后的具体实例吧，漂亮
元素简简单单，但它就是很美 马黑黑 发表于 2022-12-26 15:46
全屏后，整体的立体观感很强烈
是的，而且喷泉中的五彩也更清晰了，跟播放器相映成趣{:4_187:} 马黑黑 发表于 2022-12-26 15:47
元素简简单单，但它就是很美
非常奇妙的效果{:4_199:} 红影 发表于 2022-12-26 19:33
非常奇妙的效果
图片的功效很重要吧，要不然 @东篱闲人 会那么热衷于PS 红影 发表于 2022-12-26 19:32
是的，而且喷泉中的五彩也更清晰了，跟播放器相映成趣
是的，它要这个尺寸才最好。
不知有木有发现，我的图片不到100KB额，能有这样的效果，估计会气s @千羽 {:5_117:}
页:
[1]
2