醉美水芙蓉 发表于 2023-2-24 21:47

你是我最美的邂逅

<style>
#papa {
      margin: 80px 0 0 calc(50% - 593px);
      display: grid;
      place-items: center;
      width: 1024px;
      height: 640px;
      box-shadow: 8px 4px 20px hsla(0,0%,0%,.65);
      user-select: none;
      overflow: hidden;
      position: relative;
      z-index: 1;
      animation: flash 6s infinite alternate;
}
#papa::before {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      background: gray url('https://pic.imgdb.cn/item/611512d25132923bf81f8a35.jpg') no-repeat center/cover;
      transition: .9s;
}
#papa:hover::before { transform: scale(1.1); }
@keyframes flash { from {filter: hue-rotate(0deg); } to {filter: hue-rotate(360deg); } }
#pic {
      position: absolute;
      right: 200px;
      bottom: 40px;
      width: 200px;
      height: 200px;
      mix-blend-mode: multiply;
      -webkit-mask-image:radial-gradient(black 35%, transparent 70%);
      opacity: 0.9;
}
</style>

<div id="papa"><img id="pic" src="" alt="" /></div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=263563429&.mp3" loop autoplay></audio>

<script >
(function() {
       (function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',btn_txt: '\u2638',playerCode: `<style>#mplayer {position: absolute;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 4px;display: grid;place-items: center;color: var(--color);font: normal 16px sans-serif;z-index: 999;--ww: 260px;--color: hsl(0, 100%, 100%);--btn_size: 35px;--track: hsla(90,100%,95%,.65);--prog: linear-gradient(90deg,hsla(90,30%,50%,.55),hsla(0,70%,50%,.65),hsla(90,30%,50%,.75));}#btnplay {--state: paused;grid-area: btnplay;margin-right: -4px;font: bold var(--btn_size) / var(--btn_size) serif;text-align: center;cursor: pointer;animation: rot 4s infinite linear;animation-play-state: var(--state);}#prog {--xx: 0px;grid-area: prog;width: var(--ww);height: 10px;border-radius: 8px;background: var(--track);position: relative;cursor: pointer;}#prog::before {position: absolute;content: '';width: var(--xx);height: 100%;border-radius: 8px;background: var(--prog);}#cur { grid-area: cur; color: var(--color); }#dur { grid-area: dur; color: var(--color); }#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(0, 100%, 50%, .75));position: absolute;font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));}#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="cur">00:00</span><span id="dur">00:00</span><span id="btnplay"></span><span id="prog"></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;btnplay.innerHTML = data.btn_txt;let mKey = 0, mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);prog.style.setProperty('--xx', prg + '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());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 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;}};mkPlayer.HCPlayer = playCode;})(this);
      let averAdd = 0, offset = 0;
      let geci = `你是我最美的邂逅-龙江辉
作词：中国强强
作曲：中国强强
编曲：姜山
录音：嘴炮娱乐
混音：阿健
LRC编辑：醉美水芙蓉
爱你的路不好走
走过了就不会回头
喜欢你是我的自由
却注定和你难牵手
心里想着念你的愁
爱上你不需要理由
即使有难过和祈求
我不怕头破血流
你是我最美的邂逅
我的爱只为你停留
风风雨雨为爱坚守
盼望一天你能回眸
你是我一生的等候
我的痴情别无所求
不奢望能天长地久
看你一眼心已足够
心里想着念你的愁
爱上你不需要理由
即使有难过和祈求
我不怕头破血流
你是我最美的邂逅
我的爱只为你停留
风风雨雨为爱坚守
盼望一天你能回眸
你是我一生的等候
我的痴情别无所求
不奢望能天长地久
看你一眼心已足够
你是我最美的邂逅
我的爱只为你停留
风风雨雨为爱坚守
盼望一天你能回眸
你是我一生的等候
我的痴情别无所求
不奢望能天长地久
看你一眼心已足够
不奢望能天长地久
看你一眼心已足够
谢谢欣赏！`;

      let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
      let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}

      HCPlayer({
                lrcAr: getLrcAr(geci),
                lrc_css: '--bg: linear-gradient(hsla(90,80%,50%,.35),hsla(100,70%,45%,.6)); top: 500px;',
                player_css: '--ww: 180px; bottom: 30px;',
                btn_txt: '\&#10059',
      });

      FS({
                pa: papa,
                set: 'backgroun: transparent; color: snow; border: 2px dotted snow; left: 20px; top: 20px;',
      });

      aud.onerror = () => {
                if(aud.error.code === 4) aud.src = 'https://www.qqmc.com/up/kwlink.php?id=263563429&.mp3';
      }
})();
</script>

马黑黑 发表于 2023-2-24 22:00

中国强强

醉美水芙蓉 发表于 2023-2-24 22:03

马黑黑 发表于 2023-2-24 22:00
中国强强

跟着老师学做，玩代码！谢谢老师分享！

马黑黑 发表于 2023-2-24 22:24

醉美水芙蓉 发表于 2023-2-24 22:03
跟着老师学做，玩代码！谢谢老师分享！

{:4_190:}

焱鑫磊 发表于 2023-2-24 22:28

老师：刚来。摸不着头脑。

醉美水芙蓉 发表于 2023-2-24 22:34

焱鑫磊 发表于 2023-2-24 22:28
老师：刚来。摸不着头脑。

这里只能玩源代码，图片地址需要https的地址！上传网盘空间也需要https的地址！

红影 发表于 2023-2-24 23:13

这个变色的背景真漂亮。欣赏水芙蓉好帖{:4_187:}

醉美水芙蓉 发表于 2023-2-25 07:03

红影 发表于 2023-2-24 23:13
这个变色的背景真漂亮。欣赏水芙蓉好帖

谢谢红影美女支持！

海笑 发表于 2023-2-25 09:46

欣赏老师佳作！

梦缘 发表于 2023-2-25 10:25

变色帖，很漂亮，图好看歌好听，欣赏问好！{:4_187:}

醉美水芙蓉 发表于 2023-2-25 11:39

梦缘 发表于 2023-2-25 10:25
变色帖，很漂亮，图好看歌好听，欣赏问好！

谢谢老师支持！

红影 发表于 2023-2-25 14:51

醉美水芙蓉 发表于 2023-2-25 07:03
谢谢红影美女支持！

问好水芙蓉，下午好{:4_187:}
页: [1]
查看完整版本: 你是我最美的邂逅