谁把我心伤碎 - 赵洋
本帖最后由 亚伦影音工作室 于 2023-6-3 20:19 编辑 <br /><br /><style>#papa{margin: 10px -300px ; width: 1164px; height: 640px;background: url('https://file.moyublog.com/d/file/2023-01-08/14000aad81160a19526e0ebccd5eb18d.jpg') no-repeat center/cover;box-shadow: 0 0 0px #000;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 1; overflow:hidden;}
#papa::before{ position: absolute;top:0px; left:0px; content: ''; width: 100%; height: 100%; background:url('https://file.moyublog.com/d/file/2022-10-02/01a64556729cabadefce6041a5e287f2.jpg') no-repeat center/cover; transition:2s;z-index: 2;transform:perspective(0px) rotate(180deg)scale(0); }
#papa:hover::before { transform:perspective(0px) rotateX(0deg)scale(1,1);}
.bfq{position: absolute;top:10%; left:90%;}
#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 4px sans-serif;z-index: 999;--bgColor: linear-gradient(to right, var(--prog) 0%, var(--prog) 0%, var(--track) 0%, var(--track));--ww: 260px;--color:#ffffff;--track: #aaaaaa;--prog: hsl(0,50%,50%);}
#btnplay{--state: paused;z-index: 40;position: absolute;top:-40%; left:40%;width: 40px;height:40px;background:url(https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png)no-repeat center/cover;border-radius:0%;animation: spin 6s infinite linear;animation-play-state: var(--state);}
@keyframes spin {0%{transform: rotate(-360deg);}100%{transform: rotate(0deg);}}
#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: 0px;height: 2px;border: 4px solid var(--color);border-radius: 50%;background: var(--prog);top: -3px;cursor: pointer;z-index: 9990;}
#prog::-moz-range-thumb {-webkit-appearance: none;width: 0px;height: 2px;border: 0px solid var(--color);border-radius: 50%;background: var(--prog);cursor: pointer;z-index: 9990;}
#prog::-webkit-slider-runnable-track { height: 2px; border-radius: 0px; 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); }
#wenz{position: absolute;top:110%; left:20%;font: normal 20px 华文隶书;color:#ffffff;}
#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(0deg, #FFF000,#FFF000));position: absolute;font: normal 55px 华文隶书;color:#FF0000;white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 0px #000000);z-index: 888;}
#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="papa">
<div id="before" ></div>
<div id="testImg" >
<div class="yh">
<divalt="" id="boom1"></div>
<div alt="" id="boom2"></div>
<divalt="" id="boom3"></div>
</div>
</div>
<div id="rotate-words">
<div>谁把我心伤碎<br />
<span>亚伦原创音画</span></div>
<div>作词：雨袂独舞<br />
<span>作曲：赵洋</span></div>
<div>演唱 赵洋<br />
<span>设计：亚伦</span></div>
<div>出品：亚伦影音工作室<br />
<span>Produced by: Aaron Studios</span></div>
<div>LRC编辑：亚伦<br />
<span>整理：亚伦</span></div>
<div>代码设计：亚伦<br />
<span>出品时间：2023.6</span></div>
</div>
<div id="lrc" data-lrc="亚伦影音工作中">亚伦影音工作中</div>
<div class="bfq"><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" max="100" value="0" /><span id="wenz">亚伦影音工作室</span></div></div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music277819132.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%);',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;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: 0px solid snow; left: 0px; bottom: 0px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 0px; 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 = `谁把我心伤碎 - 赵洋
作词：雨袂独舞
作曲：赵洋
编混：赵洋音乐
出品：亚伦
制作：亚伦影音工作室
「未经许可请勿商业翻唱」
今夜烈酒我饮下一杯一杯
可是麻木不了寂寞作祟
我想让心情与快乐匹配
谁知一想你流下苦涩的泪
如今我们故事已伤痕累累
爱的誓言也已宣告作废
你用辜负将我幸福粉碎
爱得太卑微只留一地狼狈
是谁把我痴心伤碎
害我所有投入付诸流水
好想问问你为何如此虚伪
余生的日子恕我不奉陪
是谁把我痴心伤碎
丢我在黑夜受尽冷风吹
你真的不该令人万念俱灰
眼泪告诉我你根本不配
如今我们故事已伤痕累累
爱的誓言也已宣告作废
你用辜负将我幸福粉碎
爱得太卑微只留一地狼狈
是谁把我痴心伤碎
害我所有投入付诸流水
好想问问你为何如此虚伪
余生的日子恕我不奉陪
是谁把我痴心伤碎
丢我在黑夜受尽冷风吹
你真的不该令人万念俱灰
眼泪告诉我你根本不配
是谁把我痴心伤碎
害我所有投入付诸流水
好想问问你为何如此虚伪
余生的日子恕我不奉陪
是谁把我痴心伤碎
丢我在黑夜受尽冷风吹
你真的不该令人万念俱灰
眼泪告诉我你根本不配
眼泪告诉我你根本不配`;
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(#FFF000,#FFF000); top: 82%;',
player_css: '--ww: 240px; right: 40%; bottom: 2%;',
btn_txt: '\d',
});
FS({
pa: papa,
set: 'backgroun: #333; color: snow; border: 0px solid snow; top:5%; left: 5%;font: normal 30px 华文隶书;color:#ffffff;',
});
})();
var image = document.getElementById("testImg"),
button = document.getElementById("mplayer");
if (image.classList && image && button) {
button.onclick = function() {
if (this.value == '.') {
image.classList.remove('stop');
this.value = '*';
} else {
image.classList.add('stop');
this.value = '.';
}
};
}
</script>
<style type="text/css">
#rotate-words {text-align:center;
position:absolute;z-index: 2;
top: 0px;
left:5%;
padding:20% 0px;
font-size:3em;filter:drop-shadow(#ffffff 1px 1px 0px);
color:#ff0000;
font-family: '华文隶书', sans-serif;
}
#rotate-words span {
display:block;
height:80px;
font-size:.7em;color:#000078;
text-transform:lowercase;
opacity:0.8;
font-family: '华文隶书', sans-serif;
}
#rotate-words div {
position:absolute;
opacity:0;
overflow:hidden;
width:1200px;
line-height:1.2em;
animation: rotate-word 36s linear 2 0s;
}
@keyframes rotate-word {0% {
opacity: 0;
transform: translatex(-300%);
}
8% {
opacity: 1;
transform: translatex(0%);
}
17% {
opacity: 1;
transform: translatex(0%);
}
19% {
opacity: 0;
transform: translatex(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#rotate-words div:nth-child(2) { animation-delay: 6s}
#rotate-words div:nth-child(3) { animation-delay: 12s}
#rotate-words div:nth-child(4) { animation-delay: 18s}
#rotate-words div:nth-child(5) { animation-delay: 24s}
#rotate-words div:nth-child(6) { animation-delay: 30s}
</style>
<style>
.yh{top:0px; left:0px;width: 100%; height: 100%;position: absolute; z-index: 2; overflow:hidden;}
.yh #boom1{position: absolute;top:0%; left:0%;background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(18, 81, 241, 0.91) 86%);
opacity: 0;width: 100%;height: 100%;
animation: bloom 2s ease 1.2s infinite;
}
.stop #boom1{animation-play-state: paused;}
.yh #boom2{width: 100%;height: 100%;background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(18, 81, 241, 0.91) 86%);
position: absolute;top:0%; left:0%;
animation: bloom 2s ease 1.5s infinite;
}
.stop #boom2{animation-play-state: paused;}
.yh #boom3{width: 100%;height: 100%;background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(18, 81, 241, 0.91) 86%);
position: absolute;top:0%; left:0%;
animation: bloom 3s ease 1.4s infinite;
}
.stop #boom3{animation-play-state: paused;}
@keyframes bloom{
0% {opacity: 0;
transform: scale(1);
}
100% {
opacity: 1;
transform: scale(1);filter:hue-rotate(360deg)
}
}
</style>
欣赏美帖，收藏学习了！{:4_190:} 漂亮的制作，鼠标移动上去还能变换图片呢。欣赏亚伦老师好帖{:4_187:} 好有特色的帖，谢老师分享，问好老师！{:4_187:}
页:
[1]