生来就在风雨里

亚伦影音工作室 发表于 2024-6-29 21:41

本帖最后由亚伦影音工作室于 2024-6-29 21:41 编辑 <br /><br /><style>
#mydiv { --width: 1400px; margin: 130px 0 50px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 700px; background: #eee url('https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px rgba(0,0,0,.7); overflow: hidden; z-index: 1; position: relative;}
.ball { position: absolute; width: 120px; height: 120px; background: url('https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg') no-repeat center/cover; border-radius: 50%; opacity: 1; transition: width .5s, height .5s, opacity .5s; cursor: pointer; offset-path: path('M880 60 Q1940 360,520 520'); offset-distance: 0; animation: 6s linear forwards;}
.ball:hover { width: 45px; height: 45px; opacity: .95; }
.ball:nth-of-type(1) { left: -30px; top: 0; animation-name: move1-1;mix-blend-mode: sereen;opacity: .55;}
.ball:nth-of-type(2) { left: -25px; top: 0; width: 280px; height: 280px;background: url('url('https://pic.imgdb.cn/item/65e425459f345e8d0363d300.png') no-repeat center/125% 115%,') no-repeat center/cover; border-radius: 50%;offset-distance: 50%;mix-blend-mode: screen;}
#vid { position: absolute; width: 100%; height: 110%; top:-80px; object-fit: cover; mix-blend-mode: screen; pointer-events: none; opacity: .65;}
@keyframes move1-1 {
from { offset-distance: 0%; transform: rotate(720deg); filter: hue-rotate(0); }
to { offset-distance: 50%; transform: rotate(0); filter: hue-rotate(360deg); }
}
@keyframes move1-2 {
from { offset-distance: 50%; transform: rotate(0); filter: hue-rotate(360deg); }
to { offset-distance: 0%; transform: rotate(720deg); filter: hue-rotate(0); }
}
@keyframes move2-1 {
from { offset-distance: 50%; transform: rotate(720deg); filter: hue-rotate(0deg); }
to { offset-distance: 100%; transform: rotate(0); filter: hue-rotate(360deg); }
}
@keyframes move2-2 {
from { offset-distance: 100%; transform: rotate(0); filter: hue-rotate(360deg); }
to { offset-distance: 50%; transform: rotate(720deg); filter: hue-rotate(0); }
}
#lrc{left: 15%;top: 80%;}#lrcc {right:15%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;z-index: 2;font:normal 3em 华文隶书;color: #000078;white-space: pre;-webkit-background-clip: text;z-index: 20;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background:repeating-linear-gradient(to right, #ff0000, lightgreen, snow, lightgreen, orange) 50%/200px 60px,var(--bg); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style>

<div id="mydiv">
<audio id="aud" src="https://file.uhsea.com/2406/bc4ee960446c74bf1bcbb9cd0c27888aYL.mp3" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/02/00/5b4ee0fea645b.mp4" autoplay loop muted></video>

<div id="b1" class="ball"></div>
<div id="b2" class="ball"></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>

</div>

<script>
const balls = ;
b1.onanimationend = ()=> {
let ani = window.getComputedStyle(b1).getPropertyValue('animation-name');
if(ani === 'move1-1') {
b1.style.animationName = '';
b2.style.animationName = 'move2-1';
}else{
b1.style.animationName = 'move1-1';
}
};
b2.onanimationend = () => {
let ani = window.getComputedStyle(b2).getPropertyValue('animation-name');
if(ani === 'move2-1') {
b2.style.animationName = 'move2-2';
}else{
b2.style.animationName = '';
b1.style.animationName = 'move1-2';
}
};
var mState = () => {
balls.forEach(b => {
b.style.animationPlayState = aud.paused ? 'paused' : 'running';
b.title = ['暂停','播放'][+aud.paused];
});
aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
balls.forEach(b => b.onclick = () => aud.paused ? aud.play() : aud.pause());
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#mydiv',
css: 'bottom: -100px; left: 50%; transform: translate(-50%); --color: snow; --fsBg: transparent;',
});
window.onresize = () => balls.forEach(b => {
b.style.offsetPath = `path('M880 60 Q${mydiv.offsetWidth+ 240} ${mydiv.offsetHeight / 2 - 40}, ${mydiv.offsetWidth - 1080} 880')`;
b.style.animationDuration = ((mydiv.offsetWidth + mydiv.offsetHeight) / (1700 + 900)) * 6 + 's';
});
</script>
<span id="lrcStr" style="visibility: hidden;">
生来就在风雨里
词：老白
曲：是小帅啊
生活本来就难
造化又添一把酸
在人间兜兜转转
只有寂寞陪我夜半
眼泪我坚强抹去
苦痛往事我从何说起
人生走过半程颠沛流离
何时才会有奇迹
生来就在风雨里
我该不该责怪命运
往事一点一滴
每天一朝一夕
很努力却无能为力
生来就在风雨里
我该怎么坚持到底
再多疼的伤痕
再多受的委屈
只能默默的藏在心底
生活本来就难
造化又添一把酸
在人间兜兜转转
只有寂寞陪我夜半
眼泪我坚强抹去
苦痛往事我从何说起
人生走过半程颠沛流离
何时才会有奇迹
生来就在风雨里
我该不该责怪命运
往事一点一滴
每天一朝一夕
很努力却无能为力
生来就在风雨里
我该怎么坚持到底
再多疼的伤痕
再多受的委屈
只能默默的藏在心底
</span>
<script >
(function() {
/*变量：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
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;
};

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
let lrcAr = [];
let arr="";
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));
};

/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
lrca=lrcAr;
lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
let Y=String(mKey/2).indexOf(".");
if (Y == -1)
{
0==mKey&&(lrc.innerHTML=lrca);
lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
lrcc.dataset.lrc = "";
lrc.style.setProperty('--motion', 'cover1');
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
}
else
{
lrc.innerHTML = lrcb;
lrcc.dataset.lrc = lrca;
lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
lrcc.style.setProperty('--tt', time + 's');
lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
}
mKey += 1;
};
/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};

/*函数：关键帧动画状态切换*/
let mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mplayer.style.animationPlayState="running");
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
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;
   };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>

liumang 发表于 2024-7-1 00:09

欣赏亚伦老师的新作品{:5_150:}{:5_150:}

页: [1]

微风音乐's Archiver

生来就在风雨里