《蝴蝶梦》龙千玉蔡小虎

焱鑫磊 发表于 2023-12-23 12:13

本帖最后由焱鑫磊于 2023-12-23 12:16 编辑 <br /><br /><style>
#papa {margin: 100px 0 0 calc(50% - 661px);width: 1164px; height: 620px;overflow: hidden; display: grid; place-items: center; box-shadow: 3px 6px 12px gray; position: relative; z-index: 1; --state: paused; }
#dh{ width: 100%; height: 620px; position: absolute;
z-index: 1;background: #000000 url(https://i.mp3.wf/view.php/597d1bf354ab983934d1927c7026a2f9.jpg)no-repeat center/cover;
top:0px; left:0px;
animation: rod 2s linear infinite;}
@keyframes rod{0% {opacity: 0.8;filter:hue-rotate(360deg)}
50% {opacity: 0;}100% {opacity: 0.8;}
}

#player { width: 150px; height:150px;right: 60px;bottom: 60px;cursor: pointer; background: url('https://pic.imgdb.cn/item/65165dfcc458853aeff44557.png') no-repeat center/cover;animation: rotating 12s linear infinite var(--state); position: absolute;z-index: 81;}

li-zi { position: absolute;width: 25px; height: 25px;background: tan;
   clip-path: polygon(51% 41%, 56% 30%, 64% 26%, 73% 24%, 79% 26%, 85% 31%, 87% 38%, 85% 47%, 76% 56%, 65% 66%, 54% 78%, 47% 84%, 40% 76%, 31% 66%, 20% 53%, 13% 45%, 12% 36%, 16% 28%, 23% 23%, 29% 23%, 36% 25%, 43% 30%, 47% 36%);animation: imov 2s infinite;z-index: 2;}
@keyframes moving {
      100%{ opacity: 1; transform: translate(var(--x0),var(--y0)) rotate(var(--deg)); filter:hue-rotate(360deg);}
   0%{ opacity: 0; transform: translate(0,0) rotate(var(--deg)); }
}
@keyframes rotating { to { transform: rotate(360deg); } }

#lrc {
   --state: paused;
   --motion: cover2;
   --tt: 2s;
   --bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
   position: absolute;z-index: 6;
   left: 52%;
   transform: translate(-50%);
   top: 480px;
   font:normal 3em 华文新魏;
   font-weight:400;
   color: #000080;
   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{0% { width: 0%;}100% { width: 100%;}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}

</style>

<div id="papa">

<div id="dh" style="animation-play-state: running;"></div>
<svg width="1164" height="620">
<filter id="spot">
<feDiffuseLighting in="SourceGraphic" surfaceScale="3" diffuseConstant="5" lighting-color="#00ff00" id="feDiff">
<feSpotLight x="0" y="0" z="10" pointsAtX="120" pointsAtY="150" pointsAtZ="0" limitingConeAngle="20">
</feSpotLight>
</feDiffuseLighting>
</filter>
<rect x="0" y="0" width="1164" height="620" filter="url(#spot)"></rect>
</svg>
<div id="player" title="播放/暂停"></div>
<div data-lrc="" id="lrc" title="歌词显示"></div>
<audio id="aud" src="https://i.mp3.wf/view.php/8191b6aeb326ae169df03f485a29d421.mp3" autoplay loop></audio>
</div>

<script>

(function() {

let all = 160;
for(let i = 0; i < all; i++) {
let movBall = document.createElement('li-zi');
let hudu = Math.PI / 180 * 360 / all * i;
let xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
movBall.style.cssText += `
   --x0: ${xx}px;
   --y0: ${yy}px;
   --deg: ${360 / all * i}deg;
   background: #${Math.random().toString(16).substr(-6)};
   animation: moving ${Math.random() * 2 + 2}s -${Math.random() * 2}s infinite var(--state);
`;
papa.prepend(movBall);
}

let playMusic = () => aud.paused ? (aud.play(), player.title='暂停') : (aud.pause(), player.title='播放');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing',mState,false);
aud.addEventListener('pause',mState,false);
player.addEventListener('click',playMusic,false);

})();

</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); /*获得歌词数组*/
})();

dh.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>dh.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dh.style.animationPlayState = 'paused');
</script>

起个网名好难 发表于 2023-12-23 13:15

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

红影发表于 2023-12-23 13:37

心形粒子很漂亮，歌词以及效果和背景很相配。欣赏焱鑫磊好帖{:4_199:}

马黑黑 发表于 2023-12-23 14:23

很漂亮，歌也好

世外桃源 发表于 2023-12-23 16:35

欣赏了{:4_199:}

世外桃源 发表于 2023-12-23 16:36

很美的制作，楼主很有才的{:4_187:}

世外桃源 发表于 2023-12-23 16:36

欣赏佳作，感谢分享

焱鑫磊 发表于 2023-12-23 16:57

起个网名好难发表于 2023-12-23 13:15

{:4_187:}

焱鑫磊 发表于 2023-12-23 16:57

红影发表于 2023-12-23 13:37
心形粒子很漂亮，歌词以及效果和背景很相配。欣赏焱鑫磊好帖

{:4_187:}

焱鑫磊 发表于 2023-12-23 16:58

马黑黑发表于 2023-12-23 14:23
很漂亮，歌也好

{:4_190:}

焱鑫磊 发表于 2023-12-23 16:58

世外桃源发表于 2023-12-23 16:35
欣赏了

{:4_187:}

焱鑫磊 发表于 2023-12-23 16:58

世外桃源发表于 2023-12-23 16:36
很美的制作，楼主很有才的

{:4_204:}

焱鑫磊 发表于 2023-12-23 16:58

世外桃源发表于 2023-12-23 16:36
欣赏佳作，感谢分享

{:4_190:}

马黑黑 发表于 2023-12-23 17:30

焱鑫磊发表于 2023-12-23 16:58

谢谢。下午好

红影发表于 2023-12-23 20:29

焱鑫磊发表于 2023-12-23 16:57

问好焱鑫磊，晚上好{:4_187:}

小辣椒 发表于 2023-12-23 21:53

这个小心粒子效果配这背景图刚好

小辣椒 发表于 2023-12-23 21:54

是闽南语歌吧，好听{:4_199:}

小辣椒 发表于 2023-12-23 21:54

感谢精彩的分享，制作辛苦了{:4_179:}

焱鑫磊 发表于 2023-12-23 22:08

小辣椒发表于 2023-12-23 21:53
这个小心粒子效果配这背景图刚好

{:4_190:}

焱鑫磊 发表于 2023-12-23 22:08

小辣椒发表于 2023-12-23 21:54
是闽南语歌吧，好听

{:4_187:}

页: [1] 2

花潮论坛's Archiver

《蝴蝶梦》龙千玉 蔡小虎

《蝴蝶梦》龙千玉蔡小虎