论坛 › 动画音画 › 《烟火红尘》任妙音（测试网易云音乐ID）

焱鑫磊 发表于 2023-5-21 20:13

《烟火红尘》任妙音（测试网易云音乐ID）

本帖最后由 焱鑫磊 于 2023-5-21 20:49 编辑 <br /><br /><style>
#papa{margin: 100px -280px ; width: 1164px; height: 640px;background: lightgreen url('https://img.fy6b.com/2023/05/21/f9af6d26737ed.jpg') no-repeat center/cover;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#mplayer {position: absolute;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 10px 4px;display: grid;place-items: center;color: var(--color);font: normal 16px sans-serif;z-index: 999;--bgColor: linear-gradient(to right, var(--prog) 0%, var(--prog) 0%, var(--track) 0%, var(--track));--ww: 260px;--color: hsla(100,10%,80%,.95);--track: hsla(90, 100%, 95%, .65);--prog: hsl(0,50%,50%);}
#btnplay{--state: paused;z-index: 40;
position: absolute;top:-20%; left:40%;
width: 40px;
height: 40px;
cursor: pointer;background:url(https://365.tf/disk/tf/1677924635.png)0px 0px/100% 100%;border-radius:0%;
animation: spin 10s infinite linear;animation-play-state: var(--state);
}
@keyframes spin {0%{transform: rotate(-360deg);filter:hue-rotate(360deg)contrast(120%)brightness(300%)}
100%{transform: rotate(0deg);}
}
#prog {grid-area: prog;-webkit-appearance: none;width: var(--ww); outline: none;background: none;position: relative;}
#prog::-webkit-slider-thumb {-webkit-appearance: none;position: relative;background: var(--prog);top: calc(50% - 10px);cursor: pointer;z-index: 888;}

#prog::-webkit-slider-runnable-track { height: 2px; border-radius: 6px; background: var(--bgColor); }
#prog::-moz-range-track { height: 2px; border-radius: 10px; background: var(--bgColor); }
#cur { grid-area: cur; color: var(--color); }
#dur { grid-area: dur; color: var(--color); }
#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(0deg, #FFF000,#FFF000));position: absolute;font: normal 55px 华文隶书;color:#FF0000;white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 0px #000000);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-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>
<style>
#photo {width: 100%;
height: 100%;
position: absolute;z-index: -2;
border:0px solid #ffffff;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation: round 90s linear infinite;
}

@keyframes round{2% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(-280deg)scale(0.8)translate(10%,-10%);
opacity:0
}
8% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0deg)scale(0.8)translate(10%,-10%);
opacity:1
}
10% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0)scale(1)translate(0%,0%);
opacity:1
}
12% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0)scale(.8)translate(10%,-10%);
opacity:1
}

22% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(280deg)scale(0.8)translate(10%,-10%);
opacity:0
}
}

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



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

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

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

.stop #photo:nth-child(15) {
animation-play-state: paused;
}
</style>

<div id="papa">
<div id="testImg" ><div id="items" >
<img alt="" id="photo" src="https://img.fy6b.com/2023/05/21/0083664947ac7.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676614144.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676601433.jpg" />
<img alt="" id="photo" src="https://img.fy6b.com/2023/05/21/b40849714e2d0.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676695069.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676644396.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676698273.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676637814.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676611859.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676550717.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676555245.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676605567.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676571860.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676556713.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676549416.jpg" />

</div> </div>

<div id="rotate-words">
<div>《烟火红尘》<br />
<span>演唱：任妙音</span></div>

<div>作词：玉镯儿<br />
<span>作曲：陈伟</span></div>

<div>编曲：阿浩<br />
<span>Arranger:Ahao</span></div>

<div>LRC歌词制作：焱鑫磊<br />
<span>出品：焱鑫磊</span></div>
<div>网易云音乐测试<br />
<span>出品时间：2023.5</span></div>

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

<div id="mplayer"><span id="cur">00:00</span><span id="dur">00:00</span><divid="btn"> <span id="btnplay"></span></div><input type="range" id="prog" step="0.1" max="100" value="0" /></div>

</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1354425404" loop autoplay></audio>

<script >
(function() {
        (function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, mDrag = false;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onmousedown = () =>mDrag =true;prog.onmouseout = () => mDrag = false;prog.onchange = () => { aud.currentTime = aud.duration * prog.value / 100; mDrag = false; };prog.onmousemove = () => prog.style.setProperty('--bgColor', `linear-gradient(to right, var(--prog) 0%, var(--prog) ${prog.value}%, var(--track) ${prog.value}%, var(--track))`);aud.addEventListener('timeupdate', () => {cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);prog.style.setProperty('--bgColor', `linear-gradient(to right, var(--prog) 0%, var(--prog) ${prog.value}%, var(--track) ${prog.value}%, var(--track))`);if(mDrag===false) prog.value = aud.currentTime / aud.duration * 100;for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'), btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.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;}};mkPlayer.HCPlayer = playCode;})(this);
        (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: 2px 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);
        let averAdd = 1, offset = 0;
        let geci = `《烟火红尘》任妙音
词：玉镯儿 曲：陈伟
编曲：阿浩
LRC歌词制作：焱鑫磊
若非前世未了缘
何来今生未了情
千山万水人海中
偏偏与你 一见倾心
若是今生未了情
相约来生再还你
度在人生轮回里
忘却凡尘 唯不忘相思
身在俗世里 心有桃花源
思念百转千回 花开彼岸天
共看似水流年 走过烟火红尘
一生风雨相伴 来生再续缘
身在俗世里 心有桃花源
思念百转千回 花开彼岸天
共看似水流年 走过烟火红尘
一生风雨相伴 来生再续缘
若是今生未了情
相约来生再还你
度在人生轮回里
忘却凡尘 唯不忘相思
身在俗世里 心有桃花源
思念百转千回 花开彼岸天
共看似水流年 走过烟火红尘
一生风雨相伴 来生再续缘
身在俗世里 心有桃花源
思念百转千回 花开彼岸天
共看似水流年 走过烟火红尘
一生风雨相伴 来生再续缘
身在俗世里 心有桃花源
思念百转千回 花开彼岸天
共看似水流年 走过烟火红尘
一生风雨相伴 来生再续缘
一生风雨相伴 来生再续缘`;

        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;};
        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));}
HCPlayer({
                lrcAr: getLrcAr(geci),
                lrc_css: '--bg: linear-gradient(#FFF000,#FFF000); top: 82%;',
                player_css: '--ww: 240px; right: 40%; bottom: 2%;',
btn_txt: '\&#10059',
        });

        FS({
                pa: papa,
                set: 'backgroun: #333; color: snow; border: 2px solid snow; bottom: 10px; left: 20px;',
        });
})();
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 = '.';
      }
    };
}

items.style.animationPlayState = audr.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>items.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>items.style.animationPlayState = 'paused');

</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.5em;filter:drop-shadow(#000000 1px 1px 1px);
text-transform:uppercase;
color:#ff0000;
font-family: '华文隶书', sans-serif;
}

#rotate-words span {
display:block;
height:80px;
font-size:.7em;color:#fff000;
text-transform:lowercase;
opacity:0.8;
font-family: '华文隶书', sans-serif;
}

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

@keyframes rotate-word         {0% {
          opacity: 0;
          transform: translateY(-300%);
        }
        8% {
          opacity: 1;
          transform: translateY(0%);
        }
        17% {
          opacity: 1;
          transform: translateY(0%);
        }
        19% {
          opacity: 0;
          transform: translateY(100%);
        }
        25% { 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}
#rotate-words div:nth-child(5) { animation-delay: 24s}
#rotate-words div:nth-child(6) { animation-delay: 30s}
</style>
<style type="text/css">#items {width: 100%;height: 100%;top:0px; left:0px;position: absolute; animation: slider 3s linear infinite ;}
.stop #items{animation-play-state: paused;}
@keyframes slider {0% { background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(241, 23, 18, 0.91) 86%); } 100% { background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(18, 81, 241, 0.91) 86%);} }
</style>

梦缘 发表于 2023-5-21 20:16

漂亮的播放器，好看好听，欣赏问好老师！{:4_187:}

焱鑫磊 发表于 2023-5-21 20:19

梦缘 发表于 2023-5-21 20:16
漂亮的播放器，好看好听，欣赏问好老师！

问候梦缘好！{:4_176:}

醉美水芙蓉 发表于 2023-5-21 20:57

焱鑫磊 发表于 2023-5-21 21:34

醉美水芙蓉 发表于 2023-5-21 20:57
网易音乐稳定！欣赏朋友佳作！

试试好用的。{:4_187:}

起个网名好难 发表于 2023-5-21 21:38

欣赏佳作，晚上好！

焱鑫磊 发表于 2023-5-21 21:49

起个网名好难 发表于 2023-5-21 21:38
欣赏佳作，晚上好！

问候朋友晚上好！{:4_187:}

红影 发表于 2023-5-21 22:05

这么多轮播的美人图，背景也很漂亮，文字的的动态和歌词同步都很棒。欣赏焱鑫磊好帖{:4_187:}

焱鑫磊 发表于 2023-5-21 22:21

红影 发表于 2023-5-21 22:05
这么多轮播的美人图，背景也很漂亮，文字的的动态和歌词同步都很棒。欣赏焱鑫磊好帖

红影：这个帖子主要想测试一下“网易云音乐ID”。还是很好用的。

红影 发表于 2023-5-21 23:11

焱鑫磊 发表于 2023-5-21 22:21
红影：这个帖子主要想测试一下“网易云音乐ID”。还是很好用的。

是的，网易云的音乐特别方便{:4_204:}

查看完整版本: 《烟火红尘》任妙音（测试网易云音乐ID）