鬼迷心窍【文本歌词/原创马黑】

亚伦影音工作室 发表于 2024-7-3 13:28

本帖最后由亚伦影音工作室于 2024-9-23 10:52 编辑 <br /><br /><style>
#tz { left: 50%; transform: translateX(calc(-50% - 81px)); background:url('https://pic.imgdb.cn/item/666909d8d9c307b7e9e73532.jpg')no-repeat center/cover;width: 1200px; height: 700px; overflow: hidden; box-shadow: 2px 2px 6px #000; z-index: 1; position: relative; }
#player { position: absolute; width: 120px; right: 60px; bottom: 100px; cursor: pointer; animation: rot 6s linear infinite; }
#player:hover { filter: brightness(1.2);filter: hue-rotate(180deg) drop-shadow(0 0 -40px cyan); }
@keyframes fly { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }

#txtbox { position: absolute; left: 40px; top: 40px; width: 300px; min-height: 60px; padding: 10px 20px; box-sizing: border-box; overflow: hidden; }
   #txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 20px/30px sans-serif; color: cyan; txtAr-shadow: 1px 1px 1px gray; animation: 1s forwards; }
.tMid, .tRight { display: inline-block; width: 100%; }
   .tMid { text-align: center; }
   .tRight { text-align: right; font-size: 18px; }
   @keyframes move { to { transform: translate(0); } }

#bjbs{animation: rotating 1s linear infinite;width: 1200px; height: 700px;position:absolute;background:url('https://pic.imgdb.cn/item/666909d8d9c307b7e9e73532.jpg')no-repeat center/cover;}
@keyframes rotating{0%{filter:hue-rotate(360deg)contrast(180%)brightness(120%);}}
.lrc{
width: 100%;
height: 120px;
overflow: hidden;
display: block;position: absolute;top:40%; left:4%;z-index: 5;
margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:华文隶书;
font-size: 0px;
color: #000078;
font-weight: normal;
transition: .3s all ease;
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 60px;
color: #ff0000;
text-align: center;text-align: center;color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);
}
</style>

<div id="tz">
<div id="bjbs"></div>
<div class="lrc">
   <ul id="ullrc">
      </ul>
   </div>
<audio id="aud" src="https://ting8.yymp3.com/new/xiaohua/9.mp3" autoplay loop></audio>
<img id="player" alt="" title="播放" src="https://pic.imgdb.cn/item/65165dfcc458853aeff44557.png" />
<div id="txtbox"></div>

</div>

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

new Array(total = 10).fill(0).map((i,k) => {
i = document.createElement('li-zi');
i.style.cssText += `
left: ${600 / total * k + 20}px;
background: url('https://pic.imgdb.cn/item/65bf4406871b83018a08c712.png') no-repeat center/cover;
animation-delay: -${Math.random() * 20}s;
--shadow: #${Math.random().toString(16).substring(2,8)};
`;
tz.prepend(i);
});
var mState = () => {
tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var lrc = `鬼迷心窍
作词：李宗盛
出品：亚伦影音工作室
出品：亚伦影音工作室
`;
function $(id) {
return document.getElementById(id);
}//这样写以后getid方便

function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
   parts = getLrcObj(parts);
}
return parts;

function getLrcObj(content) {
   var twoParts = content.split("]");
   var time = twoParts.substr(1);
   var timeParts = time.split(":");
   var seconds = +timeParts;
   var min = +timeParts;
   seconds = min * 60 + seconds;
   var words = twoParts;
   return{
         seconds: seconds,
         words: words,
   };
}
}

var lrcArray = getLrcArray();

function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
   var li = document.createElement("li");
   li.innerText = lrcArray.words;
   $("ullrc").appendChild(li);
}
}

inputLrc();

function setPosition() {
var index = getLrcIndex();
if (index == -1) {
   return;
}
var lrc_li_height = 70, lrc_ul_height = 60;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
   top = 0;
}
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
   activeLi.classList.remove("active");
}
$("ullrc").children.classList.add("active");
}

var turn = 0;

function getLrcIndex(){
var time = $("aud").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
   if (lrcArray.seconds > time) {
         return index - 1;
   }
}
}

$("aud").ontimeupdate = setPosition;

</script >
<script>
var txtAr = [
   `<span class="tMid"></span>
歌曲《鬼迷心窍》
曾经真的以为人生就这样了
平静的心拒绝再有浪潮
斩了千次的情丝却断不了
百转千折它将我围绕
有人问我你究竟是那里好
这么多年我还忘不了
春风再美也比不上你的笑
没见过你的人不会明了
是鬼迷了心窍也好
是前世的因缘也好
然而这一切已不再重要
如果你能够重回我怀抱
是你存心的捉弄也好
然而这一切已不再重要
我愿意随你到天涯海角
虽然岁月总是匆匆地催人老
`,
   `<span class="tMid"></span>
有人问我你究竟是那里好
这么多年我还忘不了
春风再美也比不上你的笑
没见过你的人不会明了
是鬼迷了心窍也好
是前世的因缘也好
然而这一切已不再重要
如果你能够重回我怀抱
是命运的安排也好
是你存心的捉弄也好
然而这一切已不再重要
我愿意随你到天涯海角
虽然岁月总是匆匆地催人老
虽然情爱总是让人烦恼
虽然未来如何并不知道
现在说再见会不会太早<span class="tRight"></span>`
];
var curIdx = 0;
var paras = [];
var ww = txtbox.offsetWidth;

var addPs = () => {
   var txtstr = txtAr;
   txtbox.innerHTML = '';
   paras.length = 0;
   var ar = txtstr.split(/\n/).filter(item => item !=='');
   ar.forEach((p,k) => {
            var para = document.createElement('p');
            para.innerHTML = p;
            para.style.cssText += `transform: translate(${ww}px);`;
            txtbox.appendChild(para);
            paras.push(para);
   });
   curIdx = (curIdx + 1) % txtAr.length;
   mkAni();
};

var parasReset = () => {
   addPs();
   paras.forEach(p => {
            p.style.animationName = '';
            p.style.transform = 'translate(${ww}px)';
            setTimeout( () => { paras.style.animationName = 'move'; }, 500);
   });
};

var mkAni = () => {
   paras.forEach((p,k) => {
            p.onanimationend = () => {
                     paras[(k+1) % paras.length].style.animationName = 'move';
                     if(k === paras.length - 1) setTimeout( () => parasReset(), 50000);
            };
   });
};

var mState = () => {
   [...paras,...].forEach(p => p.style.animationPlayState = aud.paused ? 'paused' : 'running');
   aud.paused ?vid.pause() : vid.play();
   player.title = ['暂停', '播放'][+aud.paused];
};

aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();

addPs();
paras.style.animationName = 'move';

</script>

红影发表于 2024-7-3 14:24

这样也挺好，文本可以代替歌词了，虽然不是同步的，然而不影响阅读，还能让歌词和背景相互呼应。{:4_187:}

红影发表于 2024-7-3 14:24

欣赏亚伦老师好帖{:4_199:}

梦油发表于 2024-7-3 20:57

欣赏佳作，问候亚伦。

页: [1]

花潮论坛's Archiver

鬼迷心窍【文本歌词/原创马黑】