如果爱还在
本帖最后由 醉美水芙蓉 于 2022-5-21 22:22 编辑 <br /><br /><div style="z-index: 27;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(#)0 0px/100% 100%; text-align: center;"><imgstyle="width: 400px; height: 650px;position: absolute;top:-40px; left:20px;-webkit-mask-image: radial-gradient(black 5% ,transparent 70%);z-index: 51;" />
<img src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png" id="playpause"style="position:absolute;top:450px;left:35px;width:150px;height:150px;z-index: 60;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 class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="http://www.kumeiwp.com/sub/filestores/2021/07/18/88d46cde3b6108b127994b3901cf433c.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
<div class="img_border" id="aplay"></div>
<div class="items " style="width: 980px; height: 120px;z-index: 66;position: absolute;top:480px; left:0px;">
<divclass="lrc">
<ul id="ullrc">
</ul>
</div></div></div>
</div>
<style type="text/css">
.container{width: 1000px;height: 600px;background:url(http://pan.yinhuabbs.cn/view.php/6c080981b936b193dbff7a73abdefe0f.jpg)0 0px/100% 100%;
margin: 0;position: absolute;top:0px; left:0px;z-index: 5;}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;}
.container .btn{
display: block;
margin: 0;}
.container .lrc{
width: 960px;
height: 120px;
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:50px;z-index: 66;
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:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:0px;}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%, url( http://pan.yinhuabbs.cn/view.php/6c080981b936b193dbff7a73abdefe0f.jpg)0 0px/100% 100%;
z-index: 1;position: absolute;
top:0px;
left: 0px;
animation: rotating 4s linear infinite;}
@keyframes rotating {100%{
transform: scale(1);opacity: 1; filter:hue-rotate(0deg)contrast(110%)brightness(100%);
}
50%{transform: scale(1);opacity: 1; filter:hue-rotate(360deg)contrast(120%)brightness(200%);
}
0%{
transform: scale(1);opacity: 0; filter:hue-rotate(0deg)contrast(110%)brightness(100%);
}
}
</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%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<script >var lrc = `雨中百合 - 如果爱还在
作词：九雨
作曲：九雨
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>
页:
[1]