别忘了我在等你

午老虎 发表于 2022-11-23 19:52

<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/68c751afa7b924cad87e265e3ae3d724.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://pan.yinhuabbs.cn/view.php/2ca4fbdf745a24872f496ed9110efccb.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/cedc1e8f1f8e3488cadafcec91ade2ff.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/6f8329b18722c4537fa15b791c90588c.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/9a4b8bcd002ae1805be0b36ed3c0e2cb.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/11217710c0f2e497bcbb1b32b6e5f942.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/2e5fc2a1513b9d4eca62cc36e0325a6a.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/fddd66c865fab99390c81124f3abb2f0.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/9797a085d8f2c45daf2dc9fefd273f9c.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src=http://url.amp3a.com/kuwo.php/174011778.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;"/>
   </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 = `别忘了我在等你dj
作曲：杰哥哥
作曲：杰哥哥
原唱：月下思故人/红蔷薇
监制：思雨
女: 今夜无眠没有睡意
翻来覆去又把你想起
男: 朦胧之中你仿佛出现
独自偷偷落下了泪滴
女: 窗外小雨淅淅沥沥
滴滴雨滴敲打着玻璃
男: 心里酸楚埋怨相思雨
此时让我如何不想你
合: 雨夜等你能再次相遇
你别忘了我还在等你
女: 海誓山盟你是否忘记
男: 眼含泪水把过去回忆
合: 雨夜等你能否再相遇
相思之雨勾起了回忆
女: 等你等你等你早归期
男: 别再让我相思落泪滴
女: 窗外小雨淅淅沥沥
滴滴雨滴敲打着玻璃
男: 心里酸楚埋怨相思雨
此时让我如何不想你
合: 雨夜等你能再次相遇
你别忘了我还在等你
女: 海誓山盟你是否忘记
男: 眼含泪水把过去回忆
合: 雨夜等你能否再相遇
相思之雨勾起了回忆
女: 等你等你等你早归期
男: 别再让我相思落泪滴
女: 雨夜等你能否再相遇
男: 相思之雨勾起了回忆
女: 等你等你等你早归期
男: 别再让我相思落泪滴
合: 等你等你等你早归期
别再让我相思落泪滴`;
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-23 23:10

欣赏一下，谢谢。

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

欣赏楼主的新作，点赞好看

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

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

谢谢老师的欣赏和鼓励

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

非常开心发表于 2022-11-24 19:27
欣赏楼主的新作，点赞好看

谢谢老师的欣赏和鼓励

页: [1]

中画网's Archiver

别忘了我在等你