如果有一天我不在了--大美 TO：小风
<style>
#papa { margin: 120px 0 0 calc(50% - 785px); width: 1400px; height: 750px; display: grid; place-items: center; background: gray url('https://yinhua.ru/20221219/10.jpg') no-repeat center/cover; box-shadow: 1px 1px 10px #000; position: relative; opacity: .95; user-select: none; overflow: hidden; z-index: 1; --state: paused; }
#papa::before { position: absolute; content: ''; width: 700px; height: 400px; top: 180px; left:670px; background: url('https://yinhua.ru/20221219/31.jpg') 0px -10px/ cover no-repeat; border-radius: 50%; box-shadow: 4px 4px 4px hsla(0,0%,0%,.15); animation: rot 6s infinite alternate linear; }
#dt1{ position: absolute; width: 136px; height: 145px; top: 440px; left: 50px; }
#dt2{ position: absolute; width: 97px; height: 80px; top: 60px; left: 175px; }
@keyframes rot { from { transform: rotate(10deg); } to { transform: rotate(-10deg); } }
</style>
<div id="papa">
<img id="dt1" src="https://yinhua.ru/20221219/0002.png" alt="" style="position: absolute; mix-blend-mode: multiply; transform: translate(30px, 40px) rotate(360deg); " />
<img id="dt2" src="https://yinhua.ru/20221219/0F.gif" alt="" style="position: absolute; mix-blend-mode: multiply; transform: translate(30px, 40px) rotate(360deg); " />
<audio id="aud" src="https://yinhua.ru/20221219/rgyytbzl.mp3" autoplay></audio>
</div>
<script>
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],ypData: new Array(600).fill(0).map((v, k) => Math.floor(Math.random() * 200) + 10),player_css: 'bottom: 15px; left: 50%; transform: translate(-50%); ',playerCode: `<style>#mplayer { --color1: red; --color2: pink; --ww: 800; --hh: 80; position: absolute; cursor: pointer; }#lrc { --motion: cover2;--tt: 2s;--state: paused; --bg: linear-gradient(180deg, hsla(120, 88%, 50%,.55), hsla(120, 88%, 22%,.35)); position: absolute; top: 60px; font: bold 2.4em sans-serif; color: hsl(0, 10%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px 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%;}}</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><canvas id="mplayer"></canvas>`,};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;aud.loop = false;let mKey = 0, mFlag = true;let getCssVal = (e,v) => getComputedStyle(e).getPropertyValue(v);let ctx = mplayer.getContext('2d');let w = mplayer.width = getCssVal(mplayer,'--ww').replace(/[^0-9]/ig,''), h = mplayer.height = getCssVal(mplayer,'--hh').replace(/[^0-9]/ig,''), idx = 0;let slice = w / data.ypData.length, vmax = Math.max.apply(null, data.ypData);mplayer.onmousemove = (e) => { mplayer.title = e.offsetY < h * 0.8 ? toMin(aud.duration * e.offsetX / w) : '暂停/播放'; };mplayer.onclick = (e) => {if(e.offsetY < h * 0.8) {let ac = aud.duration * e.offsetX / w;idx = Math.round(data.ypData.length * ac / aud.duration);aud.currentTime = ac;} else {aud.paused ? aud.play() : aud.pause();}};aud.addEventListener('pause', () => mState());aud.addEventListener('playing', () => mState());aud.addEventListener('seeked', () => calcKey());aud.addEventListener('ended', () => { mKey = 0; aud.play(); });aud.addEventListener('timeupdate', () => {idx = Math.round(data.ypData.length * aud.currentTime / aud.duration);if(idx > data.ypData.length - 1) idx = data.ypData.length - 1;draw();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});let draw = () => {ctx.clearRect(0,0,w,h);ctx.strokeStyle = getCssVal(mplayer,'--color1');ctx.fillStyle = getCssVal(mplayer,'--color2');ctx.font = '14px sans-serif';ctx.shadowOffsetX = ctx.shadowOffsetY = 1;ctx.shadowBlur = 2;ctx.shadowColor = '#555';ctx.textAlign = 'center';ctx.beginPath();for(j = 0; j <= idx; j ++) {ctx.lineTo(slice*j, h - data.ypData * h / vmax);}ctx.stroke();ctx.beginPath();ctx.strokeStyle = getCssVal(mplayer,'--color2');for(j = idx; j < data.ypData.length; j ++) {ctx.lineTo(slice*j, h - data.ypData * h / vmax);}ctx.stroke();ctx.fillText((aud.paused ? '播放 ' : '暂停 ') + toMin(aud.currentTime) + ' / ' + toMin(aud.duration), w/2, h*0.95);};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 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 mState = () => aud.paused ? lrc.style.setProperty('--state', 'paused') : lrc.style.setProperty('--state', 'running');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;};draw();};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
ypData = ;
HCPlayer({
lrcAr: lrcAr,
ypData: ypData,
player_css: '--color1: Wheat; --color2: #299b13; bottom: 30px;',
});
})();
</script> @风中飞尘 小风说喜欢这首歌，我做的时候感觉特别的伤感，既然你喜欢我就还是做了{:4_170:} 黑黑，这个示波条我没有修改阴影，太细感觉不到这个频谱般的效果了@马黑黑 谢谢 很哇塞，辛苦了，，，你每天都那么晚睡，，不要熬夜，，保重身体 小辣椒 发表于 2022-12-19 21:20
黑黑，这个示波条我没有修改阴影，太细感觉不到这个频谱般的效果了@马黑黑
有阴影好，我才这么设计的 这个切片做的有艺术。大作！ 大作大美{:4_170:} 大美大作{:4_189:} 风中飞尘 发表于 2022-12-19 21:27
谢谢 很哇塞，辛苦了，，，你每天都那么晚睡，，不要熬夜，，保重身体
谢谢小风关心，估计你比我更加迟{:4_170:} 马黑黑 发表于 2022-12-19 21:27
有阴影好，我才这么设计的
是的，所以我不会去了的，效果就这么出来的 马黑黑 发表于 2022-12-19 21:29
这个切片做的有艺术。大作！
本来还想加几个效果进去，发现不能太多，就这样简单一点反而漂亮 小辣椒 发表于 2022-12-19 21:34
本来还想加几个效果进去，发现不能太多，就这样简单一点反而漂亮
是的。多和少，依据情况和感觉来 小辣椒 发表于 2022-12-19 21:33
是的，所以我不会去了的，效果就这么出来的
有一点点立体感没什么不对的 马黑黑 发表于 2022-12-19 21:36
有一点点立体感没什么不对的
是的，这个才有感觉 马黑黑 发表于 2022-12-19 21:35
是的。多和少，依据情况和感觉来
做了就加了2个 一只蝴蝶，一个纹身 马黑黑 发表于 2022-12-19 21:30
大作大美
{:4_203:} 马黑黑 发表于 2022-12-19 21:29
这个切片做的有艺术。大作！
这个效果我也是很喜欢 小辣椒 发表于 2022-12-19 21:40
这个效果我也是很喜欢
{:4_181:} 小辣椒 发表于 2022-12-19 21:39
{:4_187:}