论坛 › 动画音画 › 《故乡的雨》刘珺儿

焱鑫磊 发表于 2023-4-2 11:06

《故乡的雨》刘珺儿

本帖最后由 焱鑫磊 于 2023-4-2 11:18 编辑 <br /><br /><style>
#papa{margin: 100px -280px ; width: 1164px; height: 640px;background: lightgreen url('https://pic.imgdb.cn/item/6428e9eda682492fccca287b.jpg') no-repeat center/cover;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FF0000; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书; opacity: 1; cursor: pointer; z-index: 11}
#pp { position: absolute; top: 75%;width: 100%; left:5px; z-index: 1;}
#mplayer{top: 85%;
      left: 85%;
      width: 50px;
      height: 50px;z-index: 40;
       background-color: red;
      position: absolute;
      transform: rotate(45deg);
                animation: heartbeat .8s infinite alternate;
                filter: drop-shadow(0px 0px 10px gray);
    }
    #mplayer::before,#mplayer::after{
      content: "";
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      border-radius: 50%;
    }
    #mplayer::before{
      left: -30px;
    }
    #mplayer::after{
      top: -30px;
    }
       
@keyframes heartbeat { to { transform: rotate(45deg) scale(0.9); } }

.photo {width: 100%;
height: 100%;
position: absolute;z-index: -2;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;-webkit-mask-image: radial-gradient(black 28% ,transparent 75%);
animation: round 90s linear infinite;
}

@keyframes round{
5% {
opacity: 0;
transform:translate(200%,0%)scale(1);}
10% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
12% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
18% {
opacity: 0;
transform:translate(-200%,0%)scale(1);}
}

img:nth-child(1) {
animation-delay: 84s;
}
img:nth-child(2) {
animation-delay: 78s;
}
img:nth-child(3) {
animation-delay: 72s;
}
img:nth-child(4) {
animation-delay: 66s;
}
img:nth-child(5) {
animation-delay: 60s;
}
img:nth-child(6) {
animation-delay: 54s;
}
img:nth-child(7) {
animation-delay: 48s;
}
img:nth-child(8) {
animation-delay: 42s;
}
img:nth-child(9) {
animation-delay: 36s;
}
img:nth-child(10) {
animation-delay: 30s;
}
img:nth-child(11) {
animation-delay: 24s;
}
img:nth-child(12) {
animation-delay: 18s;
}
img:nth-child(13) {
animation-delay: 12s;
}
img:nth-child(14) {
animation-delay: 6s;
}
img:nth-child(15) {
animation-delay: 0s;
}


.stop img:nth-child(1) {
animation-play-state: paused;
}
.stop img:nth-child(2){
animation-play-state: paused;
}
.stopimg:nth-child(3){
animation-play-state: paused;
}
.stop img:nth-child(4){
animation-play-state: paused;
}
.stop img:nth-child(5){
animation-play-state: paused;
}
.stop img:nth-child(6){
animation-play-state: paused;
}
.stop img:nth-child(7) {
animation-play-state: paused;
}
.stop img:nth-child(8) {
animation-play-state: paused;
}

.stop img:nth-child(9) {
animation-play-state: paused;
}
.stop img:nth-child(10) {
animation-play-state: paused;
}

.stop img:nth-child(11) {
animation-play-state: paused;
}
.stop img:nth-child(12) {
animation-play-state: paused;
}
.stop img:nth-child(13) {
animation-play-state: paused;
}
.stop img:nth-child(14) {
animation-play-state: paused;
}

.stop img:nth-child(15) {
animation-play-state: paused;
}

</style>
<style>
#midground{
        background:url(https://365.tf/disk/tf/1676799062.png)0 0/ 40% 90%;
animation: STAR-MOVE50s linear infinite;position: absolute;overflow:hidden;width: 100%;filter: blur(0px);
        height: 100%;z-index: -1;
}
#foreground{
        background:url(https://365.tf/disk/tf/1676799062.png)0 0/ 60% 120%;
        animation: STAR-MOVE120s linear infinite;position: absolute;overflow:hidden;width: 100%;filter: blur(8px);
        height: 100%;z-index: -1;
}

@keyframes STAR-MOVE {
        from {
                background-position: 0% -600%
        }
        to {
                background-position: 600% 0%
        }
}
</style>

<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id="testImg" >
<img alt="" class="photo" src="https://365.tf/disk/tf/1676637814.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676611859.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676550717.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676555245.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676605567.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676571860.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676556713.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676549416.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/6428eebba682492fccd150a8.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/6428eea7a682492fccd13c61.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/6428ee92a682492fccd1273a.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/6428ee7da682492fccd1120b.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/6428ee69a682492fccd0fb89.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/6428ee56a682492fccd0e649.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/6428ee38a682492fccd0c693.jpg" />

<div class='pat'>
<divclass='pa'>➣</div><divclass='pa'>➣</div><divclass='pa'>➣</div><divclass='pa'>➣</div><divclass='pa'>➣</div><divclass='pa'>➣</div><divclass='pa'>➣</div><div class='pa'>➣</div>
</div>

</div>
<audio id="MusicPlayer" src="https://www.joy127.com/url/102864.mp3" loop autoplay></audio>
<canvas id="pp" title="焱鑫磊博客" ></canvas>
<ul class="list">
                <li class="one">《故乡的雨》
                <div style="transform:scale(.5)" >演唱：刘珺儿</br>词/曲：郑国江</br>
                出品：Yanxinlei</div></li>
        </ul>

<div id="foreground" ></div>
<div id="midground" ></div>


<div type="button" id="btn"title="暂停/播放">
<divid="mplayer"></div></div>

<div id="lrc" data-lrc="焱鑫磊博客">焱鑫磊博客</div>
</div>

<style>
#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;z-index: 2;
        left: 50%;
        transform: translate(-50%);
        top: 80%;
        font:normal 3em 华文彩云;
        color: #000078;
        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>


<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 (MusicPlayer.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (MusicPlayer.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 = () => MusicPlayer.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
MusicPlayer.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (MusicPlayer.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});


var image = document.getElementById("testImg"),
    button = document.getElementById("btn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}

MusicPlayer.addEventListener('pause', () => mState());/*监听暂停事件*/
MusicPlayer.addEventListener('play', () => mState());/*监听播放事件*/
MusicPlayer.addEventListener('seeked', () => calcKey());/*监听查询事件*/

mplayer.addEventListener('click', () => { MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause(); });
MusicPlayer.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');


midground.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>midground.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>midground.style.animationPlayState = 'paused');

foreground.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>foreground.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>foreground.style.animationPlayState = 'paused');




let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();


(function() { ypData = ;
let total = 120,idx = 0;
      let ctx =pp.getContext('2d');
      let w =pp.width =1164, h = pp.height = 120;
      let slice = w / total, vmax = Math.max.apply(null, ypData);
       MusicPlayer.loop = false;
      ctx.strokeStyle = '#00ff00';
      ctx.fillStyle = 'hsla(0, 70%, 95%, .75)';
      ctx.font = '14px sans-serif';
      ctx.shadowOffsetX = ctx.shadowOffsetY = 1;
      ctx.shadowBlur = 1;
      ctx.shadowColor = '#000';
      ctx.fillText('play', 100, 50);
      
      MusicPlayer.addEventListener('ended', () => { idx = 0; MusicPlayer.play(); });
      MusicPlayer.addEventListener('timeupdate', () => {
                draw();
                idx ++;
                if(idx > ypData.length - 1) idx = 0;
      });

      let draw = () => {
                let ar = Array(total).fill('0').map( (v,k) => Math.random() * (ypData * h / vmax));
                ctx.clearRect(0,0,w,h);
                ctx.beginPath();
                Array.from({length: total}).forEach((v,k) => ctx.lineTo(slice*k, h - ar));
                ctx.stroke();
                ctx.fillText(toMin(MusicPlayer.currentTime) + ' / ' + toMin(MusicPlayer.duration), 10, 30);
      }
      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 fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>

<style type="text/css">
.list{list-style: none; margin-left: 0px;width:100%; height:300px;position:absolute;z-index: 2;overflow:hidden; }
.list li{width: 100%;height: 600px; position:relative; animation: myfirst 60s1 ;line-height: 600px;text-align: center; font: normal 3.5em 黑体;color: rgb(255, 255, 255,0);transition: all .5s;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);}
@keyframes myfirst
{0%    { opacity: 0;color:#000000;transform:scale(0)}
        10%{ opacity: 1;color: #800000;transform:scale(1)}
        15%{ opacity: 1;color: #800000;transform:scale(1)}
       
50%{ opacity: 0; color: rgb(255, 255, 255,0);transform:scale(1) }
}
</style>
<style>
.pat {position: absolute; top:70%; left:35%;z-index: 6;
--tf: linear;
--effect: hover 2s var(--tf) infinite;
width: 1000px;
}
.stop .pat{
animation-play-state: paused;
}
.pa {   display: inline-block;
text-transform: uppercase;
text-align: center;
font-size: 3em;
color: #00ff00;
}

.pa:nth-child(1) {
animation: var(--effect);
}

.pa:nth-child(2) {
animation: var(--effect) .125s;
}

.pa:nth-child(3) {
animation: var(--effect) .25s;
}

.pa:nth-child(4) {
animation: var(--effect) .375s;
}

.pa:nth-child(5) {
animation: var(--effect) .5s;
}

.pa:nth-child(6) {
animation: var(--effect) .675s;
}

.pa:nth-child(7) {
animation: var(--effect) .75s;
}
.pa:nth-child(8) {
animation: var(--effect) 1s;
}
.stop .pa:nth-child(1) {
animation-play-state: paused;
}
.stop .pa:nth-child(2) {
animation-play-state: paused;
}
.stop .pa:nth-child(3) {
animation-play-state: paused;
}
.stop .pa:nth-child(4) {
animation-play-state: paused;
}
.stop .pa:nth-child(5) {
animation-play-state: paused;
}
.stop .pa:nth-child(6) {
animation-play-state: paused;
}
.stop .pa:nth-child(7) {
animation-play-state: paused;
}
.stop .pa:nth-child(8) {
animation-play-state: paused;
}
@keyframes hover {
0% {
    transform: scale(0);
    color: #000080;
}

20% {
    transform: scale(1);
    color: #ff0000;
}

50% {opacity: 1;
    transform: scale(1);
    color: #fff000;
   
}

80% {
    transform: scale(0);
    color: #000080;
    }
}
</style>

马黑黑 发表于 2023-4-2 11:30

青山绿水养美人。欣赏好帖。

樵歌 发表于 2023-4-2 12:35

这不是小日子民歌 北国之春吗{:4_173:}

小辣椒 发表于 2023-4-2 16:20

问好焱鑫磊，这个全屏欣赏和红心按钮制作的完美{:4_199:}

小辣椒 发表于 2023-4-2 16:21

谢谢精彩分享{:4_171:}

亚伦影音工作室 发表于 2023-4-2 18:04

完美{:4_199:}

梦缘 发表于 2023-4-2 19:26

美人美景，好看好听，感谢分享，欣赏问好！{:4_204:}

焱鑫磊 发表于 2023-4-2 19:56

马黑黑 发表于 2023-4-2 11:30
青山绿水养美人。欣赏好帖。

谢谢老师鼓励！{:4_187:}

焱鑫磊 发表于 2023-4-2 19:56

樵歌 发表于 2023-4-2 12:35
这不是小日子民歌 北国之春吗

问候老师好！{:4_187:}

焱鑫磊 发表于 2023-4-2 19:57

小辣椒 发表于 2023-4-2 16:20
问好焱鑫磊，这个全屏欣赏和红心按钮制作的完美

谢谢老师鼓励！{:4_187:}

焱鑫磊 发表于 2023-4-2 19:58

小辣椒 发表于 2023-4-2 16:21
谢谢精彩分享

问候老师好！{:4_204:}

焱鑫磊 发表于 2023-4-2 19:58

亚伦影音工作室 发表于 2023-4-2 18:04
完美

谢谢老师鼓励！{:4_187:}

焱鑫磊 发表于 2023-4-2 19:58

梦缘 发表于 2023-4-2 19:26
美人美景，好看好听，感谢分享，欣赏问好！

谢谢老师鼓励！{:4_187:}

樵歌 发表于 2023-4-2 21:33

焱鑫磊 发表于 2023-4-2 19:56
问候老师好！

不敢不敢{:4_189:}

小辣椒 发表于 2023-4-2 21:43

焱鑫磊 发表于 2023-4-2 19:57
谢谢老师鼓励！

不客气，叫小辣椒就可以了{:4_171:}

马黑黑 发表于 2023-4-2 22:27

焱鑫磊 发表于 2023-4-2 19:56
谢谢老师鼓励！

{:4_191:}

红影 发表于 2023-4-2 23:09

好漂亮的制作，欣赏好帖{:4_187:}

焱鑫磊 发表于 2023-4-2 23:18

红影 发表于 2023-4-2 23:09
好漂亮的制作，欣赏好帖

谢谢红影鼓励！{:4_187:}

红影 发表于 2023-4-3 15:55

焱鑫磊 发表于 2023-4-2 23:18
谢谢红影鼓励！

问好焱鑫磊，下午好{:4_187:}

查看完整版本: 《故乡的雨》刘珺儿