利用mix-blend-mode制作变色HTML5音画《人生就像一碗汤》
本帖最后由 亚伦影音工作室 于 2023-4-27 23:41 编辑 <br /><br /><style>#papa {
margin: 20px-300px;
display: grid;
place-items: center;
width: 1164px;
height: 620px;
background: linear-gradient(131deg, #6C57E5 8%,#0A8AED 30%,#2CCAA4 53%,#E09528 76%,#F54040 95%);
box-shadow: 0 0px 4px 0px hsla(0,0%,0%,.65);
user-select: none;
position: relative;
z-index: 1;
overflow:hidden;
}
#ptpt{width: 100%; display: grid;
place-items: center;
height: 100%;
background:url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/be93a58514f0a16de55c2833c9f70228.jpg') no-repeat center/cover;
user-select: none;
position:absolute;
z-index: 20;
animation: flash 16s infinite linear;
}
@keyframes flash { 0%{mix-blend-mode: darken; }35%{mix-blend-mode: color-burn;} 70% {mix-blend-mode: hard-light; } 100% { }}
#mplayer {position: absolute;grid-template-columns: auto auto auto;gap: 8px;display: grid;place-items: center;color: var(--color);font: normal 12px sans-serif;z-index: 999;--ww: 500px;--color: #00FF00;--btn_size: 30px;--track: #00FF00;--prog: #FF0000;}
#btnplay {--state: paused;margin-right: -5px;font: bold var(--btn_size) / var(--btn_size) serif;cursor: pointer;animation: rot 4s infinite linear;animation-play-state: var(--state);}
@keyframes rot { to { transform: rotate(1turn); } }
#prog {--xx: 0px;width: var(--ww);height: 2px;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);}
@keyframes cover1{ from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
#lrc { --motion: cover2; --tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(240, 50%, 50%, .25), hsla(240, 30%, 50%, .75));position: absolute;left: 40%; top:87%;filter: drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);font:normal 3em 华文行楷;color:#00f222; z-index: 100; transform: translate(-30%, 10px);-webkit-background-clip: text;white-space: pre;}
#lrc::before { position: absolute; content: attr(data-lrc); color: transparent; width: 30%; height: 100%;white-space: pre; background: linear-gradient(0deg, #120278 8%,#ED370A 32%,#F8FBFB 57%,#42E028 76%,#043C69 95%);-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
</style>
<div id="papa"><div id="ptpt"></div><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div></div>
<audio id="aud" src="https://www.qqmc.com/mp3/music271957611.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: '❃',playerCode: ``,};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;tmsg.innerText = `${toMin(aud.currentTime)} | ${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);
(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 = 0, offset = 0;
let geci = `人生就像一碗汤
词曲：黄勇
演唱：晓依
编曲：旋律音乐
策划：梦歆
出品：亚伦影音工作室
人往高处走 水往地处流
谁不想腰缠万贯富的流油
生活的艰辛总让人犯愁
咬紧牙关努努力总会熬出头
山外有青山 楼外还有楼
坦然面对沟与坎少些追与求
放松心情把生活当做杯中酒
爱恨情仇穿肠过喜悦心中留
人生就像一碗汤你要慢慢熬
苦辣酸甜各滋味你要慢慢嚼
是福是祸都得要注定没法挑
中了命运的圈套逃也逃不掉
人生就像一碗汤你要慢慢熬
苦辣酸甜各滋味你要慢慢嚼
平平淡淡才是真没事多笑笑
身体健康最重要金钱买不到
人往高处走 水往地处流
谁不想腰缠万贯富的流油
生活的艰辛总让人犯愁
咬紧牙关努努力总会熬出头
山外有青山 楼外还有楼
坦然面对沟与坎少些追与求
放松心情把生活当做杯中酒
爱恨情仇穿肠过喜悦心中留
人生就像一碗汤你要慢慢熬
苦辣酸甜各滋味你要慢慢嚼
是福是祸都得要注定的没法挑
中了命运的圈套逃也逃不掉
人生就像一碗汤你要慢慢熬
苦辣酸甜各滋味你要慢慢嚼
平平淡淡才是真没事多笑笑
身体健康最重要金钱买不到`;
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:80%; ',
player_css: '--ww: 900px;bottom: 10px;',
btn_txt: '❄',
});
FS({
pa: papa,
set: 'backgroun: #333; color: snow; border: 2px solid snow; bottom: 90%; left: 20px;',
});
ptpt.style.animationPlayState =aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => ptpt.style.animationPlayState = 'running');
aud.addEventListener('pause', () => ptpt.style.animationPlayState = 'paused');
aud.onerror = () => {
if(aud.error.code === 4) aud.src='https://www.qqmc.com/mp3/music270271202.mp3';
}
})();
</script>
欣赏，好听 欣赏！{:4_187:} 制作精彩，欣赏学习了！{:4_191:} 欣赏佳作 欣赏亚伦的精彩制作。小辣椒又提建议了，对你这种高手就要比别人要求高{:4_170:} 你这个变色我感觉要设置渐变比较好，你现在的变色就像是变脸的速度{:4_170:} 今天画面的美女特别漂亮，很养眼的 小辣椒 发表于 2023-4-27 22:00
你这个变色我感觉要设置渐变比较好，你现在的变色就像是变脸的速度
变色有多种方式，这是其中一种背景变色，之前是原图变色！ 亚伦影音工作室 发表于 2023-4-27 22:32
变色有多种方式，这是其中一种背景变色，之前是原图变色！
我是指变色不要秒变，要渐变出来，这样不会很突然一下子变色了 小辣椒 发表于 2023-4-27 22:50
我是指变色不要秒变，要渐变出来，这样不会很突然一下子变色了
理解有误，速度可调！ 画面好美，制作漂亮。欣赏亚伦老师好帖{:4_187:}
页:
[1]