辽阔的草原

午老虎 发表于 2022-11-24 13: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

(https://tx2.a.yximgs.com/udata/music/music_ee57b90fc4f54e1aa906187ad69959550.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="https://pic.imgdb.cn/item/6331055716f2c2beb14a95c4.jpg" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/6334361f16f2c2beb14abe1d.jpg" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/6334361f16f2c2beb14abe17.jpg" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/633436a416f2c2beb14b3cc7.jpg" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/6334366116f2c2beb14afe81.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src=http://url.amp3a.com/kuwo.php/161968.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 = `

《辽阔的草原》德德玛
编辑制作：午老虎
虽然有辽阔的草原
不知道何处有泥潭啊哈哈
萨若拉趿拉米你白拔除
西把而台那木噶给你么的怪啊哈哈
虽然有美丽的姑娘
不知道她的那心愿啊哈哈后
塞喊啊么日个米你白拔除
萨那给你月如么的怪啊哈哈呼
`;
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>
<P style="MARGIN-TOP: -382px; MARGIN-LEFT: -740px" align=center><IMG style="WIDTH: 200px; HEIGHT: 375px" src="https://help-ol.bj.bcebos.com/d63029a2f706a76b51d948a63a50a793.jpg" width=200 height=372>
<DIV></DIV>
<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-24 23:46

欣赏一下，谢谢。

非常开心 发表于 2022-11-25 19:58

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

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

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

谢谢老师的欣赏和鼓励

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

非常开心发表于 2022-11-25 19:58
欣赏收藏老师新作好看又好听

谢谢老师的欣赏和鼓励

页: [1]

中画网's Archiver

辽阔的草原