我心永恒

醉美水芙蓉 发表于 2022-5-24 20:17

本帖最后由醉美水芙蓉于 2022-5-24 20:17 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_10353397">
<div style="z-index: 27;width: 1000px; height: 600px; margin-top:130px; 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://music.163.com/song/media/outer/url?id=5242686.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/8a72a900c2413669eb02fc58510bfaa5.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/8a72a900c2413669eb02fc58510bfaa5.jpg)0 0px/100% 100%;
z-index: 1;position: absolute;
top:0px;
left: 0px;
animation: rotating 3s linear infinite;}
@keyframes rotating {100%{
   transform: scale(1);opacity: 1; filter:hue-rotate(0deg)contrast(110%)brightness(100%);
}

   50%{transform: scale(1, 1);opacity: 1; filter:hue-rotate(360deg)contrast(120%)brightness(200%);
}
0%{
   transform: scale(5);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 = `My Heart Will Go On (Love Theme from "Titanic") - Céline Dion (席琳·迪翁)
LRC编辑：醉美水芙蓉
Every night in my dreams
I see you I feel you
That is how I know you go on
Far across the distance
And spaces between us
You have come to show you go on
Near Far wherever you are
I believe that the heart does go on
Once more you open the door
And you're here in my heart and
My heart will go on and on
Love can touch us one time
And last for a lifetime
And never let go untill we're gone
Love was when I loved you
One true time I hold to
In my life we'll always go on
Near Far wherever you are
I believe that the heart does go on
Once more you open the door
And you're here in my heart and
My heart will go on and on
You're here there's nothing I fear
And I know that my heart will go on
We'll stay forever this way
You are safe in my heart
And my heart will go on and on
谢谢欣赏！`;
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>
</td></tr></table>

红影发表于 2022-5-24 21:20

席琳迪昂的这首歌特别好听，水芙蓉的制作真美，很赞{:4_187:}

醉美水芙蓉 发表于 2022-5-24 21:24

红影发表于 2022-5-24 21:20
席琳迪昂的这首歌特别好听，水芙蓉的制作真美，很赞

很喜欢这首歌，看见东篱老师发的这首歌曲就制作了一个！谢谢红影美女欣赏支持！

红影发表于 2022-5-25 11:37

醉美水芙蓉发表于 2022-5-24 21:24
很喜欢这首歌，看见东篱老师发的这首歌曲就制作了一个！谢谢红影美女欣赏支持！

z经典歌曲永远有生命力{:4_187:}

岩新新 发表于 2022-5-25 12:28

欣赏精彩制作！

醉美水芙蓉 发表于 2022-5-25 19:41

岩新新发表于 2022-5-25 12:28
欣赏精彩制作！

谢谢岩新老师欣赏支持！

绿叶清舟 发表于 2022-5-25 21:04

制作真棒啊，一直喜欢的一首歌

醉美水芙蓉 发表于 2022-5-25 21:21

绿叶清舟发表于 2022-5-25 21:04
制作真棒啊，一直喜欢的一首歌

清舟美女也喜欢这首歌呀！

绿叶清舟 发表于 2022-5-25 21:40

醉美水芙蓉发表于 2022-5-25 21:21
清舟美女也喜欢这首歌呀！

是啊很喜欢的了

页: [1]

花潮论坛's Archiver

我心永恒