论坛 › 动画音画 › 《如果这就是爱情》张靓颖

焱鑫磊 发表于 2023-5-25 00:22

《如果这就是爱情》张靓颖

本帖最后由 焱鑫磊 于 2023-5-25 11:13 编辑 <br /><br /><style>
#papa {
        margin: 100px -280px;
        width: 1164px;
        height: 640px;
        background: url('https://img.fy6b.com/2023/05/24/32c708b6c8e24.jpg') no-repeat center/cover;
        box-shadow: 0 0 0px #000;
        position: relative;
        z-index: 1;overflow:hidden;
        --state: paused;
}
css-doodle { position: absolute; }

#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #ff0000, #80ef03);
        position: absolute;z-index: 4;
        left: 50%;
        transform: translate(-50%);
        top: 85%;
        font:normal 3em 华文行楷;
        color: #055306;
        white-space: pre;
        -webkit-background-clip: text;
        filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;
        height: 100%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background: var(--bg);
       
        -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="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
        <css-doodle grid="6" id="mplayer">
          :doodle {margin: 3% 70%;
                @grid: 2 / 300px 60px;
                position: absolute;z-index: 1000;
                color: var(--color);
            transform: scale(1);
                --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color:#ffffff; --state: paused;
      }
      /* 时间信息 : 左 */
      @nth(1) {
                @place: 10% 125%;
                :after { content: var(--ttmsg1); }
      }
      /* 控制器 */
      @nth(2) {
                @size: var(--size);
                @shape: windmill;
                @place: 50% 35%;
                background: var(--color);
                animation: rot 6s infinite linear var(--state);
      }
      /* 时间信息 : 右 */
      @nth(3) {
                @place: 90% 125%;
                :after { content: var(--ttmsg2); }
      }
      /* 进度条 */
      @nth(4) {
                @place: 50% 80%;
                @size: 60% 2px;
                background: #aaaaaa;
               display: grid;
                place-items: center start;
                :before {
                        content: '';
                        width: var(--prog);
                        height: 100%;
                        background: var(--color);
                }
      }
      @keyframes rot { to { transform: rotate(1turn); } }
        </css-doodle>
        <css-doodle grid="20">
               :doodle {@size: 1400px 1400px;margin: -20% 0%;}    @grid: 50x1 / 1400px 1400px;   
:container {      perspective: 10vmin;    }
pointer-events: auto;   
background: @m(@r(120, 120),radial-gradient( @p(#ff0000,#00ff00,#fff000,#ffffff) 6%,      transparent 20%   )
@r(100%) @r(100%) / @r(1%, 3%) @lr no-repeat);   
@size: 30%;    @place-cell: center;   
border-radius: 50%;   
transform-style: preserve-3d;    animation: scale-up 15s linear infinite var(--state);    animation-delay: calc(@i * -.6s);   
@keyframes scale-up {      0% {   opacity: 0;      transform: translate3d(0, 0, 0) rotate(0);      }      10% {         opacity: 1;       }      95% {      transform:          translate3d(0, 0, @r(50vmin, 55vmin))          rotate(@r(-360deg, 360deg));   }100% {      opacity: 0;      transform: translate3d(0, 0, 1vmin); }    }

        </css-doodle>
        <audio id="aud" src="https://www.joy127.com/url/105161.mp3" autoplay loop></audio>

</div>

<script>
(function(){
        let script = document.createElement('script');
        script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
        document.head.appendChild(script);
let mState = () => aud.paused ? ( papa.style.setProperty('--state', 'paused')) : ( papa.style.setProperty('--state', 'running'));
aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
       aud.addEventListener('seeked', () => calcKey());
       
})();
(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: 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);
FS({
                pa: papa,
               
set: 'backgroun: #333; color: snow; border: 0px solid snow; bottom: 90%; left: 20px;font:normal 2.1em 华文隶书;',
      });
(function() {
      let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
      let script = document.createElement('script');
      script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
      document.head.appendChild(script);
      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;};
      let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('timeupdate', () => {
                mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
                mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
                mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
      });

      mplayer.onclick = () => {
                if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
                if(clickIdx === 2) aud.currentTime = progChg;
      }
      mplayer.onmousemove = (e) => {
                let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;
                clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
                mplayer.style.cursor = cursors;
                if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
      }
})();
</script>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
《如果这就是爱情》张靓颖
编曲：廖伟杰
LRC歌词制作：焱鑫磊
你做了选择对的错的
我只能承认心是痛的
怀疑你舍得
我被伤的那么深
就放声哭了何必再强忍
我没有选择我不再完整
原来最后的吻如此冰冷
你只能默认我要被割舍
眼看着你走了
如果这不是结局
如果我还爱你
如果我愿相信你就是唯一
如果你听到这里
如果你依然放弃
那这就是爱情我难以抗拒
如果这就是爱情
本来就不公平
你不需要讲理我可以离去
如果我成全了你
如果我能祝福你
那不是我看清
是我证明我爱你
灰色的天空无法猜透
多余的眼泪无法挽留
什么都牵动
感觉真的好脆弱
被呵护的人原来不是我
我不要你走我不想放手
却又不能够奢求
同情的温柔
你可以自由我愿意承受
把昨天留给我
如果这不是结局
如果我还爱你
如果我愿相信你就是唯一
如果你听到这里
如果你依然放弃
那这就是爱情我难以抗拒
如果这就是爱情
本来就不公平
你不需要讲理我可以离去
如果我成全了你
如果我能祝福你
那不是我看清
是我证明我爱你
如果这就是爱情
本来就不公平
你不需要讲理我可以离去
如果我成全了你
如果我能祝福你
那不是我看清
是我证明我爱你

`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, 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 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) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 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 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;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.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;
                }
        }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>

红影 发表于 2023-5-25 09:33

这个背景加上粒子效果特别好呢，非常灵动{:4_187:}

红影 发表于 2023-5-25 09:34

好像画面太满了，让同步歌词和播放器进度条都没地方安放了{:4_173:}
美女帽子那的播放器如果放在歌词下会不会更好点？

焱鑫磊 发表于 2023-5-25 09:51

红影 发表于 2023-5-25 09:33
这个背景加上粒子效果特别好呢，非常灵动

问好红影！{:4_176:}

焱鑫磊 发表于 2023-5-25 09:51

本帖最后由 焱鑫磊 于 2023-5-25 11:11 编辑

红影 发表于 2023-5-25 09:34
好像画面太满了，让同步歌词和播放器进度条都没地方安放了
美女帽子那的播放器如果放在歌词下会 ...
红影好！调整很长时间调不好，只好先这样吧。{:4_187:}

梦缘 发表于 2023-5-25 10:54

漂亮的播放器，欣赏点赞！{:4_187:}

焱鑫磊 发表于 2023-5-25 11:08

梦缘 发表于 2023-5-25 10:54
漂亮的播放器，欣赏点赞！

梦缘好！{:4_187:}

红影 发表于 2023-5-25 12:53

焱鑫磊 发表于 2023-5-25 09:51
问好红影！

这首歌曲也很好，高品质音乐{:4_187:}

红影 发表于 2023-5-25 12:54

焱鑫磊 发表于 2023-5-25 09:51
红影好！调整很长时间调不好，只好先这样吧。

嗯嗯，这样也不错{:4_173:}

查看完整版本: 《如果这就是爱情》张靓颖