《好人好梦》孙悦/戴军

相约爱晚亭 发表于 2022-12-24 09:12

本帖最后由相约爱晚亭于 2023-12-11 18:07 编辑 <br /><br /><div class="cont-area">
            <div style="position: relative; width: 1200px; top:60px; left: -322px;box-shadow:0px 0px 2px 2px #694006, 0px 0px 0px 4px #fff,0px 0px 2px 15px #694006;overflow:hidden;border-radius:0%;margin-top:50px;margin-LEFT: 20px;">
<div style="position:relative;width: 1200px;height: 700px;overflow:hidden;top: 0px;left: 0px;">
<div style="left: 0px;position:absolute;top: 0px;">
<div style="width: 1200px; height: 700px; margin-top:0px; margin-left:0px;box-shadow: 0px 0px 0px 0px #cccccc, 0px 0px 0px 0px #880000, 0px 0px 0px 0px #1b6f2b; overflow: hidden;transform:rotate(0deg);background:url('http://tuku.link/imgs/2023/03/2a2c2dc30bbf7694.gif')0 0/100%100%; text-align: center;">
<div class="HT">
<audio autoplay=""id="MusicPlayer"src="https://music.163.com/song/media/outer/url?id=2007331536.mp3" loop="" ></au
<div class="img_border"></div>
<div class="btn">
<div class="BJ">
   <div class="btn">
      <img src="http://tuku.link/imgs/2022/12/cde99ed0a050007c.png" id="playpause"style="position:absolute;top:-600px;left:150px;width:960px;height:800px;z-index: 600;"/>
   </div>
   <divclass="lrc"><ul id="ullrc"></ul></div>
</div>
<div class="lrc"><ul id="ullrc"></ul></div>
</div>

<style type="text/css">
.HT{width: 1px;position: absolute;top:-600px; left:0px;}
.BJ{width: 1px;height: 1px;
margin: 0;position: absolute;top:-550px; left:0px;z-index: 100;
}
#MusicPlayer{
width: 250px;
margin: 0 auto;
}
.btn{
z-index: 300;
margin: 0px 0px;position: absolute;top:540px; left:-60px;
}
.lrc{
width: 870px;
height: 140px;
overflow: hidden;filter:drop-shadow(#FFFfff 1px 0 0)drop-shadow(#FFFfff 0 1px 0)drop-shadow(#FFFfff -1px 0 0) drop-shadow(#FFFfff 0 -1px0);
display: block;position: absolute;top:600px; left:120px;z-index: 30;
margin: 0 auto;
}
.lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
height: 80px;
line-height: 60px;
font-family:楷体;/*歌词字体, 默认为微软雅黑*/
font-size: 0px;/*歌词字体大小,设置0px仅显示一行（当前歌词）*/
color: #000078;/*歌词显示颜色默认黑色*/
text-align: center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
transform: translate(0%,0%);/*变换位置*/
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
display: block;
width: 100%;
margin: 0 auto;-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: red;
background-image:linear-gradient(50deg, #fff000, #ff0000, #000000, #00f000);/*变色设置*/
background-repeat:no-repeat;
background-position: -800px 0;
-webkit-animation:loop 3s linear infinite;

}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 45px;/*歌词字体大小*/
color: #ff0000;transform: translate(0%,0%);
font-weight: bold;/*歌词加粗，默认不加粗*/
}

@-webkit-keyframes loop{
0%{background-position: -800px 0;}
100%{background-position: -0 0;}
}

/*mv动画*/
.img_border{display:inline-block;width:70px;height:70px;margin:0px ;position: absolute;top:-20px; left:-260px;z-index: 150;}
.img_border #aplay{ }
.z360z{-webkit-animation:rotating 10s linear infinite;animation:rotating 10s linear infinite}@-webkit-keyframes rotating{0% {transform: rotateX(0deg) rotateY(0deg)
rotateZ(0deg)scale(0.2);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-30deg)scale(2);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg)scale(2);}
</style>
<style type="text/css">.items{ z-index: 1540;animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>

<script>var lrc =`
《好人好梦》 (Live版)
《好人好梦》 (Live版)
作词 : 樊孝斌
作曲 : 宋书华
编曲 : 弋洋
和声编写 : 张恋歌
演唱：孙悦 / 戴军
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 = 80, lrc_ul_height = 70;
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 = $("MusicPlayer").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
   if (lrcArray.seconds > time) {
         return index - 1;
   }
}
}

$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
   var aud = document.getElementById("MusicPlayer");
var img = document.getElementById("playpause");
img.onclick = function() {
if (aud.paused) {
aud.play();
} else {
aud.pause();
}
}
aud.addEventListener("play", function (e) {
img.src="http://tuku.link/imgs/2022/12/cde99ed0a050007c.png";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://tuku.link/imgs/2022/12/cde99ed0a050007c.png";
}, false);
</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()

{document.getElementById("aplay").className="cb-slideshow ";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);

</script>

<br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

红影发表于 2022-12-24 09:21

把两个歌手的动图截取了来，边听歌边看动图，真心不错。歌词同步很炫。欣赏爱晚亭精美好帖{:4_187:}

马黑黑 发表于 2022-12-24 09:30

欣赏

梦油发表于 2022-12-24 15:07

本帖最后由梦油于 2022-12-25 19:54 编辑

好人一生平安。

亦是金 发表于 2022-12-25 19:45

梦油发表于 2022-12-24 15:07
好人一生怕。

欣赏学习！

相约爱晚亭 发表于 2022-12-27 10:52

红影发表于 2022-12-24 09:21
把两个歌手的动图截取了来，边听歌边看动图，真心不错。歌词同步很炫。欣赏爱晚亭精美好帖

谢谢红影的支持和鼓励！

相约爱晚亭 发表于 2022-12-27 10:52

马黑黑发表于 2022-12-24 09:30
欣赏

谢谢黑黑老师的支持和鼓励！

相约爱晚亭 发表于 2022-12-27 10:54

梦油发表于 2022-12-24 15:07
好人一生平安。

谢谢梦油的支持和祝福！

相约爱晚亭 发表于 2022-12-27 10:55

亦是金发表于 2022-12-25 19:45
欣赏学习！

谢谢亦是金的支持和评点！

相约爱晚亭 发表于 2022-12-27 11:05

家人及亲戚几乎全感染新冠感冒，专家预言90%的人会被感染，现在看来此言不虚。唯愿大家都能平安度过难关。

马黑黑 发表于 2022-12-27 11:47

相约爱晚亭发表于 2022-12-27 10:52
谢谢黑黑老师的支持和鼓励！

{:5_108:}

梦油发表于 2022-12-27 15:10

相约爱晚亭发表于 2022-12-27 10:54
谢谢梦油的支持和祝福！

不客气。

红影发表于 2022-12-28 21:26

相约爱晚亭发表于 2022-12-27 10:52
谢谢红影的支持和鼓励！

不客气，问好{:4_187:}

页: [1]

花潮论坛's Archiver

《好人好梦》 孙悦/戴军

《好人好梦》孙悦/戴军