论坛 › 动画音画 › 《人生还遇多少苦》李英

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

《人生还遇多少苦》李英

本帖最后由 焱鑫磊 于 2023-5-6 18:54 编辑 <br /><br /><style>
#papa{margin: 100px -280px ; width: 1164px; height: 640px;background: lightgreen url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f8c26f36f0e7def3294fae69643ba486.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 {margin:0 auto;z-index: 40;
position: absolute;top:75%; left:85%;
width: 120px;
height: 120px;
cursor: pointer;
animation: spin 10s infinite linear;
}
@keyframes spin {0% { transform: rotate(360deg); }
}
.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 65%);
animation: round 90s linear infinite;
}

@keyframes round{
4% {
opacity: 0;
transform:translate(0%,-150%)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(0%,150%)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/1676632382.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676614144.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676601433.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676668629.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676695069.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676644396.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676698273.jpg" />
<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" />
</div>
<audio id="MusicPlayer" src="https://www.joy127.com/url/101016.mp3" loop autoplay></audio>
<canvas id="pp" title="焱鑫磊博客" ></canvas>
<div id="rotate-words">
<div>人生还遇多少苦<br />
<span>How many hardships will you encounter in life</span></div>

<div>演唱：李英<br />
<span>Sing: Liying</span></div>

<div>词: 徐智渊 飘飘曲：义恒<br />
<span>Word：XuzhizhouPiaopiaoSong: Yiheng</span></div>

<div>出品：焱鑫磊<br />
<span>Produced by: Yanxinlei</span></div>
</div>

<div id="foreground" ></div>
<div id="midground" ></div>
<div type="button" id="btn"title="暂停/播放">
<img id="mplayer" src="https://pic2.imgdb.cn/item/6412faecebf10e5d5357f0ef.png" alt="" /></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 =50;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
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(); });

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');

mplayer.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>mplayer.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">
#rotate-words {text-align:center;
position:absolute;z-index: 2;
max-width:800px;
left:0%;
margin:auto;
padding:20% 0;
font-size:3.8em;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
text-transform:uppercase;
color:#ff0000;
font-family: '华文隶书', sans-serif;
}

#rotate-words span {
display:block;
height:80px;
font-size:.7em;color:#000000;
text-transform:lowercase;
opacity:0.8;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
font-family: '华文隶书', sans-serif;
}

#rotate-words div {
position:absolute;
opacity:0;
overflow:hidden;
left:10vw;
width:80vw;
line-height:1.2em;
animation: rotate-word 48s linear 8 0s;
}

@keyframes rotate-word {
    0% { opacity: 0;transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    3% { opacity: 1;transform: translateX(0);filter:blur(0px);transform:scale(.7)}
    12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
    16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    80% { 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}
</style>

马黑黑 发表于 2023-2-25 09:05

歌美人靓，帖子漂亮。

播放控制器图片不出来？

红影 发表于 2023-2-25 09:15

漂亮。暂停后所有动态都停止了，很特别的方式。欣赏焱鑫磊好帖{:4_187:}

庶民 发表于 2023-2-25 09:25

视频都这样精美。

焱鑫磊 发表于 2023-2-25 10:42

马黑黑 发表于 2023-2-25 09:05
歌美人靓，帖子漂亮。

播放控制器图片不出来？

问候老师好！

焱鑫磊 发表于 2023-2-25 10:42

红影 发表于 2023-2-25 09:15
漂亮。暂停后所有动态都停止了，很特别的方式。欣赏焱鑫磊好帖

问候老师好！

焱鑫磊 发表于 2023-2-25 10:42

庶民 发表于 2023-2-25 09:25
视频都这样精美。

问候老师好！

马黑黑 发表于 2023-2-25 11:27

焱鑫磊 发表于 2023-2-25 10:42
问候老师好！

{:4_190:}

小辣椒 发表于 2023-2-25 18:18

很奇怪，刚来就已经在小风空间上传了，{:4_189:}

红影 发表于 2023-2-25 19:03

焱鑫磊 发表于 2023-2-25 10:42
问候老师好！

{:4_190:}

焱鑫磊 发表于 2023-3-2 12:38

小辣椒 发表于 2023-2-25 18:18
很奇怪，刚来就已经在小风空间上传了，

问候老师好！

查看完整版本: 《人生还遇多少苦》李英