论坛 › 欢乐水吧 › 当思念变成火焰

醉美水芙蓉 发表于 2022-6-7 18:50

当思念变成火焰

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"> <div style="z-index: 127;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: linear-gradient(0deg, #000080, #003300, #882222, #000000); text-align: center;">
<img class='photo'   style="background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/3b639b214d31fe83a6f5ffb0e28d7644.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)0 0px/100% 100%;"/>
<img class='photo'style="background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b2477df1e9ace98a0fd72d00553397ca.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)0 0px/100% 100%;" />
<img class='photo' style="background:url(https://img-baofun.zhhainiao.com/fs/c38d11b35de58d6e9fb4f54759c4eeb9.jpg)0 0px/100% 100%;" />
<img class='photo'style="background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/4cb41dacbb046d10732f324ae909bfc7.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)0 0px/100% 100%;" />
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/5086f787b8d9a4e21c52441b9f2072af.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)0 0px/100% 100%;"/>
<img class='photo'style="background: url(https://img-baofun.zhhainiao.com/fs/b3de9eb826a650fd095477cee42a73b4.jpg)0 0px/100% 100%;"/>
<img class='photo'style="background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/86bb14e704efa0c880ea615cd9454868.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)0 0px/100% 100%;" />
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/fs/3796ec86d75cbac16c1dc892582fcbbb.jpg)0 0px/100% 100%;" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=221991129&.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;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>
<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: 1000px;
height: 600px;
position: absolute;top:0px; left:0px;
filter:contrast(150%)brightness(80%);-webkit-mask-image: radial-gradient(black 15% ,transparent 70%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {1% {
opacity: 0;
transform:translate(-100%,0%)scale(1);}
5% {
opacity: 1;
transform:translate(-100%,0%)scale(1);}
14% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
16% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
24% {
opacity: 0;
transform:translate(0%,0%)scale(2);}
}
img:nth-child(8) {animation-delay: 42s;}
img:nth-child(7) {animation-delay: 36s;}
img:nth-child(6) {animation-delay: 30s;}
img:nth-child(5) {animation-delay: 24s;}
img:nth-child(4) {animation-delay: 18s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}
</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:50px;
    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:00px;}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;background:url(http://pan.yinhuabbs.cn/view.php/72e6648419bd1c5b0357a8244dcf0713.png)0 0/50%50%, url(http://pan.yinhuabbs.cn/view.php/a85ac24bdbb0e82f4478a2a9f06d148d.png)0 0px/80% 80%;
    z-index: 13;position: absolute;
   top:-500px;
    left: 0px;
animation: rotating 40s linear infinite;}
@keyframes rotating {0%{
      background-position: -50% 0;
    }
    100%{
      background-position: 600% -600%;filter:hue-rotate(360deg)
    }
}
</style>
<style type="text/css">.items{ z-index: 1540;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 = `当思念变成火焰 (DJ默涵版) - 安静
词：于跃好
曲：石雨菲
制作人：米奇
Op：星汉马文化
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>
</td></tr></table>

红影 发表于 2022-6-7 20:15

好多的美人儿啊，水芙蓉的制作真漂亮{:4_187:}

醉美水芙蓉 发表于 2022-6-7 20:24

红影 发表于 2022-6-7 20:15
好多的美人儿啊，水芙蓉的制作真漂亮

红影美女晚上好！

绿叶清舟 发表于 2022-6-7 20:27

芙蓉也是高产的啊，制作漂亮

醉美水芙蓉 发表于 2022-6-7 20:29

绿叶清舟 发表于 2022-6-7 20:27
芙蓉也是高产的啊，制作漂亮

清舟美女晚上好！

绿叶清舟 发表于 2022-6-7 20:41

醉美水芙蓉 发表于 2022-6-7 20:29
清舟美女晚上好！

芙蓉晚上好

马黑黑 发表于 2022-6-7 20:44

这个无法加载：

http:**//**image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png

单独访问可以打开

千羽 发表于 2022-6-7 21:27

水芙蓉的图做的很漂亮，必须赞一个{:4_187:}

醉美水芙蓉 发表于 2022-6-7 21:30

马黑黑 发表于 2022-6-7 20:44
这个无法加载：

http:**//**image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png


谢谢黑黑老师点评！

醉美水芙蓉 发表于 2022-6-7 21:30

千羽 发表于 2022-6-7 21:27
水芙蓉的图做的很漂亮，必须赞一个

千羽美女晚上好！

千羽 发表于 2022-6-7 21:32

醉美水芙蓉 发表于 2022-6-7 21:30
千羽美女晚上好！

问好芙蓉美女{:4_187:}

红影 发表于 2022-6-7 21:38

醉美水芙蓉 发表于 2022-6-7 20:24
红影美女晚上好！

问好水芙蓉，晚上好{:4_187:}

马黑黑 发表于 2022-6-7 22:23

醉美水芙蓉 发表于 2022-6-7 21:30
谢谢黑黑老师点评！

{:4_180:}

查看完整版本: 当思念变成火焰