情定那拉提
<div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_10344369">
<div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-200px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(http://pan.yinhuabbs.cn/view.php/17211a2df75adeb7a0e4147b337cd2ae.jpg)0 0/100%100%,linear-gradient(0deg, #000080, #003300,#800000, #000060);text-align: center;">
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src=" http://chuangshicdn.data.mvbox.cn/music/yc/22/05/20/22052021144840286082.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
<div class="btn">
<img src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png" id="playpause"style="position:absolute;top:-35px;left:35px;width:150px;height:150px;z-index:
600;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);"/>
</div>
<div class="img_border" id="aplay"></div>
<div class="bs" style="z-index: 500;position: absolute;top:0px; left:0px;">
<divclass="lrc">
<ul id="ullrc">
</ul>
</div></div></div>
<div id="txtBox" class="bs"style="margin: auto;color: #fff000;font-family:华文隶书;font-size: 1.5em;position: absolute;left: 60px;top: 10px; width: 900px;text-align:
center;"></div>
</div>
<style type="text/css">
.container{width: 1px;height: 1px;
margin: 0;position: absolute;top:500px; left:-20px;z-index: 100;}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;}
.container .btn{
display: block;
margin: 0;}
.container .lrc{
width: 960px;
height: 130px;
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:10px; left:70px;
margin: 0 auto;}
.container .lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.container .lrc #ullrc li{
height: 60px;
line-height: 60px;
font-family:华文新魏;
font-size: 0px;
color: #000078;transform: translate(0%,0%);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
font-size: 48px;
color: #ff0000;transform: translate(0%,0%);
font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:0px;transform: scale(1,1);transform:rotateX(0deg) rotateY(0deg)
rotateZ(0deg);}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;
z-index: 13;position: absolute;
top:-500px;opacity: 0.7;
left: 20px;background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%, url(http://pan.yinhuabbs.cn/view.php/21f51fc6b3b4f3e8c7eeff08dd87b742.png)0 0px/70% 50%;
animation: rotating 50s linear infinite;}
@keyframes rotating {
0%{
background-position: 600% 0;
}
100%{
background-position: 0 600%;filter:hue-rotate(360deg)
}
}
</style>
<style type="text/css">.bs{animation: slider0 0.26s linear infinite ;position: absolute;top:-20px; left:0px;z-index: 1000;}
@keyframes slider0 {0%,100%{margin: 0px 0px;filter:hue-rotate(360deg)drop-shadow(0px 0px 8px #CD6600) drop-shadow(0px 0px 8px #CD6600)drop-shadow(0px 0px 8px #CD6600)brightness
(100%);}50%{margin: 0px 0px;filter:hue-rotate(0deg)drop-shadow(0px 0px 8px #000090)drop-shadow(0px 0px 8px #000090)drop-shadow(0px 0px 8px #000090)brightness(100%);}}
</style>
<script language="javascript">
var txtBox = document.getElementById("txtBox");
var idx = 0;
var str = " 《云朵 - 情定那拉提》 ";
setInterval(function(){
txtBox.innerHTML = str.substring(0, idx) + "➽➣";
idx += 1;
if(idx > str.length) idx = 0;
}, 300);
</script>
<script >var lrc = ` 云朵 - 情定那拉提
作词：博文
作曲：石明
编曲：那扎尔
企划：黄鑫
统筹：春平
出品单位：TCC国际
云深处
放牧人家
炊烟袅袅染晚霞
松林海
月亮花
雪山云雾弄清纱
空中草原
放飞骏马
牛羊好似珍珠撒
梦几度
悄悄话
问君怎能不想她
牧歌欲正乘风去
今生做伴多潇洒
只愿情定那拉提
莫谈海角和天涯
空中草原
放飞骏马
牛羊好似珍珠撒
梦几度
悄悄话
问君怎能不想她
牧歌欲正乘风去
今生做伴多潇洒
只愿情定那拉提
莫谈海角和天涯
牧歌欲正乘风去
今生做伴多潇洒
只愿情定那拉提
莫谈海角和天涯
谢谢欣赏！`;
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 = 60, lrc_ul_height = 60;
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://image.hnol.net/c/2022-05/16/14/20220516140228811-5769293.gif";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png";
}, false);
</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="txtBox";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>
</td></tr></table>
云朵唱的歌曲都好听。还有云飞的歌曲都好听。{:4_199:} 加林森 发表于 2022-5-21 18:12
云朵唱的歌曲都好听。还有云飞的歌曲都好听。
是的！ 醉美水芙蓉 发表于 2022-5-21 18:23
是的！
辛苦你了！{:4_190:} 加林森 发表于 2022-5-21 18:24
辛苦你了！
还得跟队长多多学习呢，好多都不会制作呢？ 好听的歌曲，漂亮的制作，欣赏水芙蓉好帖{:4_187:} 醉美水芙蓉 发表于 2022-5-21 18:32
还得跟队长多多学习呢，好多都不会制作呢？
我都是跟着老黑教程学习的。 红影 发表于 2022-5-21 18:34
好听的歌曲，漂亮的制作，欣赏水芙蓉好帖
红影美女晚上好！ 新疆俺故乡的风景 马黑黑 发表于 2022-5-21 19:30
新疆俺故乡的风景
黑黑老师晚上好！ 高亢大气的草原歌曲 友昕 发表于 2022-5-21 21:09
高亢大气的草原歌曲
友昕版主晚上好！ 非常好听制作精美！ 赞！
{:4_204:}{:4_199:} 醉美水芙蓉 发表于 2022-5-21 21:05
黑黑老师晚上好！
晚上好，喝茶{:4_190:} 高清，漂亮！{:5_116:}
页:
[1]