论坛 › 欢乐水吧 › 魂牵梦萦

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

魂牵梦萦

<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(http://bbs.cnzv.cc/pan/qun91530683/2022/05/25/f81c417b2fadbaf943a091800f2fc2f7.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)0 0px/100% 100%;"/>
<img class='photo'   style="background: url(http://bbs.cnzv.cc/pan/qun91530683/2022/05/25/d9fca5627dd25edd324340f1775eda38.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)0 0px/100% 100%;" />
<img class='photo'   style="background: url(http://bbs.cnzv.cc/pan/qun91530683/2022/05/25/70908a6dedc3c2b2cb0e796c6bb86504.jpg)0 0px/100% 100%;" />
<img class='photo'   style="background: url(http://bbs.cnzv.cc/pan/qun91530683/2022/05/25/298f8ece0248b1972e9d5b6fb6585ea0.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)0 0px/100% 100%;" />
<img class='photo'   style="background: url(http://bbs.cnzv.cc/pan/qun91530683/2022/05/25/7b065a5f4eabe84ac9864f057e5a9eb3.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)0 0px/100% 100%;"/>
<img class='photo'   style="background: url(http://bbs.cnzv.cc/pan/qun91530683/2022/05/25/eaeba8e6a2e27e145287abe50752627c.jpg)0 0px/100% 100%;"/>
<img class='photo'   style="background: url(http://bbs.cnzv.cc/pan/qun91530683/2022/05/25/05d57c87542c310df8e2a7ed067ed4e4.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)0 0px/100% 100%;" />
<img class='photo'   style="background: url(http://bbs.cnzv.cc/pan/qun91530683/2022/05/25/f1dda09dfe08f836aa8026b44a859bd1.jpg)0 0px/100% 100%;" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=220495982&.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默涵版)
作词：龙奔
作曲：龙奔
录音：陈明
出品：王婷婷
出品公司：启韵文化
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>

小辣椒 发表于 2022-5-26 22:39

谢谢水芙蓉分享{:4_171:}

加林森 发表于 2022-5-26 21:48

水芙蓉晚上好，制作得真漂亮，好样的！{:4_199:}

马黑黑 发表于 2022-5-26 21:52

有些图片未能显示

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

加林森 发表于 2022-5-26 21:48
水芙蓉晚上好，制作得真漂亮，好样的！

队长晚上好！欣赏愉快！

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

马黑黑 发表于 2022-5-26 21:52
有些图片未能显示

谢谢黑黑老师告知，可能是外链失效！

马黑黑 发表于 2022-5-26 21:55

醉美水芙蓉 发表于 2022-5-26 21:54
谢谢黑黑老师告知，可能是外链失效！

找个好链接

加林森 发表于 2022-5-26 21:58

醉美水芙蓉 发表于 2022-5-26 21:53
队长晚上好！欣赏愉快！

嗯嗯，你也挺好的。{:4_204:}

红影 发表于 2022-5-26 22:22

隐隐约约的美人儿图很漂亮，欣赏水芙蓉好帖{:4_187:}

醉美水芙蓉 发表于 2022-5-27 07:02

红影 发表于 2022-5-26 22:22
隐隐约约的美人儿图很漂亮，欣赏水芙蓉好帖

红影美女可以看见图片吗？黑黑老师说看不见图片？

醉美水芙蓉 发表于 2022-5-27 07:03

小辣椒 发表于 2022-5-26 22:39
谢谢水芙蓉分享

问好小辣椒美女！

东篱闲人 发表于 2022-5-27 09:37

这个画面切换代码太好了。。。{:5_116:}

红影 发表于 2022-5-28 21:14

醉美水芙蓉 发表于 2022-5-27 07:02
红影美女可以看见图片吗？黑黑老师说看不见图片？

能看见啊，很漂亮{:4_187:}

查看完整版本: 魂牵梦萦