歌声恋情

午老虎 发表于 2022-11-25 20:35

<div class="t_fsz">
<div style="z-index: 127;width: 1000px; height: 620px; margin-top:30px; margin-left:-30px;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/2e5fc2a1513b9d4eca62cc36e0325a6a.jpg)0

0/40% 50%,url(http://tuku.link/imgs/2022/07/95a9798fd03648ba.png)0 0/100% 100%; text-align: center;">
<img class='photo'src="http://www.yinhuabbs.cn/data/attachment/forum/202206/22/170912zrcqfl8ucj09m900.jpg" alt="" />
<img class='photo'src="https://s4.ax1x.com/2022/02/24/bPbv8K.jpg" alt="" />
<img class='photo'src="http://www.yinhuabbs.cn/data/attachment/forum/202206/22/170913tw954dumu00a90uc.jpg" alt="" />
<img class='photo'src="http://www.yinhuabbs.cn/data/attachment/forum/202206/22/170915fb3vvhm2p9izvpf9.jpg" alt="" />
<img class='photo'src="https://s4.ax1x.com/2022/02/24/bPbjC6.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/2e5fc2a1513b9d4eca62cc36e0325a6a.jpg" alt="" />
<img class='photo'src=http://www.yinhuabbs.cn/data/attachment/forum/202206/22/170914vbihqq5y9ocqyow2.jpg" alt="" />
<img class='photo'src=http://tuku.link/imgs/2022/07/95a9798fd03648ba.p" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="http://url.amp3a.com/kuwo.php/479194.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/20220516140228811-5769293.gif"

id="playpause"style="position:absolute;top:-35px;left:35px;width:150px;height:150px;z-index: 600;"/>
   </div>
<div class="img_border" id="aplay"></div>
<div class="items " style="width: 980px; height: 120px;z-index: 500;position: absolute;top:0px; left:0px;">
<divclass="lrc">
   <ul id="ullrc">
      </ul>
</div></div></div>
</div>
<style type="text/css">
.photo {width: 100%;
height: 100%;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 5px #880000;
position: absolute;top:0px; left:0px;
filter:hue-rotate(0deg)contrast(120%)brightness(100%);
animation: round 32s infinite;
opacity: 0;}
@keyframes round {0% {
opacity: 1;clip-path:circle(33% at 0% 30%);
-webkit-transform:translate(0%,0%)scale(1);}

8% {
opacity: 1;clip-path:circle(33% at 50% 50%);
-webkit-transform:translate(0%,0%)}
10% {
opacity: 1;clip-path: circle(70.7% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
15% {
opacity: 0;clip-path: circle(70.7% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
}
img:nth-child(1) {animation-delay: 28s;}
img:nth-child(2) {animation-delay: 24s;}
img:nth-child(3) {animation-delay: 20s;}
img:nth-child(4) {animation-delay: 16s;}
img:nth-child(5) {animation-delay: 12s;}
img:nth-child(6) {animation-delay: 8s;}
img:nth-child(7) {animation-delay: 4s;}
img:nth-child(8) {animation-delay: 0s;}
</style >

<style type="text/css">
.container{width: 1px;height: 1px;
margin: 0;position: absolute;top:500px; left:0px;z-index: 100;}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;}
.container .btn{
display: block;z-index: 300;
margin: 0;}
.container .lrc{
width: 960px;
height: 120px;z-index: 1;
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:80px;
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: 70px;
line-height: 70px;
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;}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
font-size: 40px;
color: #ff0000;
font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:1100px;height:620px;margin:0px ;position: absolute;top:0px;left:00px;}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1100px; height: 620px;
z-index: 13;position: absolute;
top:-500px;
left: 0px;
animation: rotating 0.5s linear infinite;}
@keyframes rotating {
0%{opacity: 1;background: linear-gradient(0deg, rgba(251, 81, 81, 0.33) 13%,rgba(106, 80, 240, 0.07) 47%,rgba(65, 185, 41, 0.42)

85%);}
50% {opacity: 1;background: linear-gradient(45deg, rgba(114, 251, 81, 0.33) 13%,rgba(240, 184, 80, 0.05) 47%,rgba(185, 41, 45,

0.42) 87%);}
100%{opacity: 1;background: linear-gradient(90deg, rgba(251, 81, 81, 0.33) 13%,rgba(80, 240, 215, 0.11) 47%,rgba(26, 77, 251,

0.42) 87%);}
}
</style>
<style type="text/css">.items{ animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<script >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 = 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 = $("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="items";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById

("aplay").className="";};var lyric = parseLyric(songkrc);
</script>

澜天发表于 2022-11-25 20:47

抢个沙发来听歌

蓝魔发表于 2022-11-25 23:11

欣赏一下，谢谢。

非常开心 发表于 2022-11-27 11:38

欣赏收藏老师新作好看又好听高手

午老虎 发表于 2022-12-5 17:17

澜天发表于 2022-11-25 20:47
抢个沙发来听歌

谢谢老师的欣赏和鼓励

午老虎 发表于 2022-12-5 17:17

蓝魔发表于 2022-11-25 23:11
欣赏一下，谢谢。

谢谢老师的欣赏和鼓励

午老虎 发表于 2022-12-5 17:17

非常开心发表于 2022-11-27 11:38
欣赏收藏老师新作好看又好听高手

谢谢老师的欣赏和鼓励

页: [1]

中画网's Archiver

歌声恋情