遇上你是我的缘《游龙惊凤》片尾曲 TO：绿叶清舟
<style>#papa { margin: 80px 0 0 calc(50% - 732px); display: grid; place-items: center; width: 1280px; height: 700px;box-shadow: 8px 4px 20px hsla(0,0%,0%,.65); user-select: none; overflow: hidden; position: relative; z-index: 1; animation: flash 10s infinite alternate; }
#papa::before { position: absolute; content: ''; width: 100%; height: 100%; background: gray url('https://pan.365.tf/uploads/lxx/za/GIF.gif') no-repeat center/cover; transition: .7s; }
#papa:hover::before { transform: scale(1.1); }
@keyframes flash { from {filter: hue-rotate(0deg); } to {filter: hue-rotate(360deg); } }
</style>
<div id="papa">
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2022/07/03/ysnswdy.mp3" loop autoplay></audio></div>
<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%);',playerCode: `<style>#mplayer {position: absolute;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 10px 4px;display: grid;place-items: center;color: var(--color);font: normal 16px sans-serif;z-index: 222;--bgColor: linear-gradient(to right, var(--prog) 0%, var(--prog) 0%, var(--track) 0%, var(--track));--ww: 260px;--color: hsla(100,10%,80%,.95);--track: hsla(90, 100%, 95%, .65);--prog: hsl(0,50%,50%);}#btnplay {--state: paused;position: absolute;top: -40px;width: 50px;height: 50px;border-radius: 50%;box-shadow: 10px 8px 0 0 var(--track);cursor: pointer;opacity: .9;animation: rot 1s linear infinite alternate;animation-play-state: var(--state);}#btnplay::before, #btnplay::after { position: absolute; content: ''; }#btnplay::before { left: 15px; top: 12px; width: 90%; height: 90%; }#btnplay::after {left: 15px;top: 15px;width: 40%;height: 40%;border-radius: 50%;background: var(--track);}#btnplay:hover { opacity: 1; }#prog {grid-area: prog;-webkit-appearance: none;width: var(--ww); outline: none;background: none;position: relative;}#prog::-webkit-slider-thumb {-webkit-appearance: none;position: relative;width: 20px;height: 20px;border: 6px solid var(--color);border-radius: 50%;background: var(--prog);top: calc(50% - 10px);cursor: pointer;z-index: 888;}#prog::-moz-range-thumb {-webkit-appearance: none;width: 12px;height: 12px;border: 6px solid var(--color);border-radius: 50%;background: var(--prog);cursor: pointer;z-index: 888;}#prog::-webkit-slider-runnable-track { height: 6px; border-radius: 10px; background: var(--bgColor); }#prog::-moz-range-track { height: 6px; border-radius: 10px; background: var(--bgColor); }#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(240, 50%, 50%, .25), hsla(240, 30%, 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(30deg); } }</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><input type="range" id="prog" step="0.1" max="100" value="0" /></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;let mKey = 0, mFlag = true, mDrag = false;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onmousedown = () =>mDrag =true;prog.onmouseout = () => mDrag = false;prog.onchange = () => { aud.currentTime = aud.duration * prog.value / 100; mDrag = false; };prog.onmousemove = () => prog.style.setProperty('--bgColor', `linear-gradient(to right, var(--prog) 0%, var(--prog) ${prog.value}%, var(--track) ${prog.value}%, var(--track))`);aud.addEventListener('timeupdate', () => {cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);prog.style.setProperty('--bgColor', `linear-gradient(to right, var(--prog) 0%, var(--prog) ${prog.value}%, var(--track) ${prog.value}%, var(--track))`);if(mDrag===false) prog.value = aud.currentTime / aud.duration * 100;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);
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
let averAdd = 1, offset = 0;
let geci = `演唱：叶凡\r\n轻轻回首间 白云已走远\r\n带走我的思念 岁岁又年年\r\n青山立两旁 白云为伴\r\n拨动我的心弦 一遍又一遍\r\n遇上你是我的缘\r\n芙蓉出水我也难遮面\r\n跟着你是我的缘\r\n邀来日月星辰为我辩\r\n爱上你是我的恋 风风雨雨\r\n我们手相牵 跟着你是我的缘\r\n天涯海角相伴到永远\r\n遇上你是我的缘《游龙惊凤》片尾曲\r\n帖赠：绿叶清舟\r\n轻轻回首间 白云已走远\r\n带走我的思念 岁岁又年年\r\n青山立两旁 白云为伴\r\n拨动我的心弦 一遍又一遍\r\n遇上你是我的缘\r\n芙蓉出水我也难遮面\r\n跟着你是我的缘\r\n邀来日月星辰为我辩\r\n爱上你是我的恋 风风雨雨\r\n我们手相牵 跟着你是我的缘\r\n天涯海角相伴到永远\r\n遇上你是我的缘\r\n芙蓉出水我也难遮面\r\n跟着你是我的缘\r\n邀来日月星辰为我辩\r\n爱上你是我的恋 风风雨雨\r\n我们手相牵 跟着你是我的缘\r\n天涯海角相伴到永远\r\n遇上你是我的缘\r\n芙蓉出水我也难遮面\r\n跟着你是我的缘\r\n邀来日月星辰为我辩\r\n爱上你是我的恋 风风雨雨\r\n我们手相牵 跟着你是我的缘\r\n天涯海角相伴到永远\r\n遇上你是我的缘\r\n芙蓉出水我也难遮面\r\n跟着你是我的缘\r\n邀来日月星辰为我辩\r\n]`;
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));left: 280px;top: 80px;',
player_css: '--ww: 240px; right: 40%; bottom: 40px;',
});
FS({
pa: papa,
set: 'backgroun: #333; color: Azure; border: 2px solid Azure; bottom: 240px; left: 40%;',
});
aud.onerror = () => {
if(aud.error.code === 4) aud.src = 'https://music.163.com/song/media/outer/url?id=26222196.mp3';
}
})();
</script> @绿叶清舟 清舟小辣椒这个是黑黑的月下效果的作业，就当还礼了{:4_170:}
没有清舟的礼物漂亮，我晚上还要上来认真仔细看看你那频谱的制作，学习一下
@红影
亲爱的~~昨天晚上捣鼓很迟，那个函数渐变颜色弄不好，直接把你那个语句抄过来了{:4_170:} @马黑黑
黑黑昨天我晚上这个函数渐变颜色弄了很久，不会做，也是不晓得这个讲解在哪里，我问了度娘，没有用{:4_198:}
问了度娘这个没有学到我不会
hue-rotate()函数是一个内置函数，用于对图像应用滤镜以设置图像的色调旋转。 测试了好久的
hue-rotate( angle )
参数：该功能接受单参数角度，该角度保持hue-rotation的角度。正色相角会增加色相值，而负角会降低色相值。
以下示例说明了CSS中的hue-rotate()函数：
例：
CSS hue-rotate() Function
h1 {
color:green;
}
body {
text-align:center;
}
.hue_rotate_effect {
filter:hue-rotate(100deg);
}
黑黑，今天晚上我上来看看你的讲解，我这个好像一点没有学过{:4_203:} 小辣椒 发表于 2023-2-25 18:40
@马黑黑
黑黑昨天我晚上这个函数渐变颜色弄了很久，不会做，也是不晓得这个讲解在哪里，我问了度娘，没 ...
是滤镜，不是渐变颜色。滤镜有好几个，我的原帖使用 brightness （亮度）滤镜，还有几个可用。滤镜会导致元素及其上的子元素（包括文本）变色，所以你认为是渐变颜色。 小辣椒 发表于 2023-2-25 18:40
@马黑黑
黑黑昨天我晚上这个函数渐变颜色弄了很久，不会做，也是不晓得这个讲解在哪里，我问了度娘，没 ...
百度不太懂我说的话的{:4_170:} @绿叶清舟 收礼开森 有声音有歌词，沒画儿{:4_173:} 樵歌 发表于 2023-2-25 19:36
有声音有歌词，沒画儿
樵哥哥 现在再看看。我换了上传空间，你记得去缓存看 马黑黑 发表于 2023-2-25 19:15
@绿叶清舟 收礼开森
黑黑可以看见图图吗？ 小辣椒 发表于 2023-2-25 19:43
黑黑可以看见图图吗？
看不见我会说的 马黑黑 发表于 2023-2-25 18:51
是滤镜，不是渐变颜色。滤镜有好几个，我的原帖使用 brightness （亮度）滤镜，还有几个可用。滤镜会导致 ...
那是没有好好学习{:4_170:} 马黑黑 发表于 2023-2-25 18:52
百度不太懂我说的话的
度娘老了。。。。{:4_170:} 醉美水芙蓉 发表于 2023-2-25 19:06
欣赏辣椒美女好作品！
谢谢水芙蓉欣赏{:4_171:}
马黑黑 发表于 2023-2-25 19:44
看不见我会说的
有人说看不见我重新上传了其他空间