亚伦影音工作室 发表于 2024-6-30 06:35

生来就在风雨里

<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>

马黑黑 发表于 2024-6-30 09:23

用了 @南无月 设计的相抵路径，与帖子整体构思理念般配，图美帖靓歌好听

红影 发表于 2024-6-30 09:26

大小头像来回替换，这构思十分有趣。也是竖向的方式呢。
欣赏亚伦老师好帖{:4_187:}

亚伦影音工作室 发表于 2024-6-30 09:26

马黑黑 发表于 2024-6-30 09:23
用了 @南无月 设计的相抵路径，与帖子整体构思理念般配，图美帖靓歌好听

老师过奖了

南无月 发表于 2024-6-30 09:27

马黑黑 发表于 2024-6-30 09:23
用了 @南无月 设计的相抵路径，与帖子整体构思理念般配，图美帖靓歌好听

{:4_170:}白鹿好漂亮的演员。
这个还加了歌词，非常棒。。

马黑黑 发表于 2024-6-30 11:23

南无月 发表于 2024-6-30 09:27
白鹿好漂亮的演员。
这个还加了歌词，非常棒。。

厉害的样子

马黑黑 发表于 2024-6-30 11:23

亚伦影音工作室 发表于 2024-6-30 09:26
老师过奖了

{:4_190:}

愤怒的葡萄 发表于 2024-6-30 11:53

这个好像是白鹿吧，《宁安如梦》的剧照吧。

老谟深虑 发表于 2024-6-30 12:34

          欣赏老师的佳作，点赞！

南无月 发表于 2024-6-30 18:00

马黑黑 发表于 2024-6-30 11:23
厉害的样子

我刚才整了个有歌词的竖版贴，
用了编辑器里的歌词逐字同步，原来它是横的。
我就大胆儿改了一下JS重新上传，有那么个意思出来的。。
不过部分歌词重字。。不是最长的句子。{:4_173:}
有点不太明白

马黑黑 发表于 2024-6-30 18:01

南无月 发表于 2024-6-30 18:00
我刚才整了个有歌词的竖版贴，
用了编辑器里的歌词逐字同步，原来它是横的。
我就大胆儿改了一下JS重新 ...

多试多有心得

南无月 发表于 2024-6-30 18:02

马黑黑 发表于 2024-6-30 18:01
多试多有心得

第一次改JS有点含糊的，现在看来没那么可怕。这算是个开始吧

马黑黑 发表于 2024-6-30 18:03

南无月 发表于 2024-6-30 18:02
第一次改JS有点含糊的，现在看来没那么可怕。这算是个开始吧

知识储备不够，可以边改边查资料

南无月 发表于 2024-6-30 20:26

马黑黑 发表于 2024-6-30 18:03
知识储备不够，可以边改边查资料

严重不够。我慢慢来吧{:4_170:}

小辣椒 发表于 2024-6-30 23:02

欣赏亚伦的精彩制作

马黑黑 发表于 2024-6-30 23:13

南无月 发表于 2024-6-30 20:26
严重不够。我慢慢来吧

没事，JS不是说学就能学会的

南无月 发表于 2024-7-1 18:25

马黑黑 发表于 2024-6-30 23:13
没事，JS不是说学就能学会的

{:4_191:}

马黑黑 发表于 2024-7-1 19:13

南无月 发表于 2024-7-1 18:25


{:4_190:}
页: [1]
查看完整版本: 生来就在风雨里