论坛 › 欢乐水吧 › 多想你还能陪在我左右

醉美水芙蓉 发表于 2022-5-22 12:10

多想你还能陪在我左右

<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: url(http://pan.yinhuabbs.cn/view.php/f8ca6d8130e06b7eb9441453c91fcdc1.jpg)0 0/100%100%; text-align: center;">
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/565073294e63c0bc59cb263e53457c4c.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7909e2d575c7a88c70e4d0e3c2e02b87.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6a04aa78e43c52b1c97a0d9dd0e302f0.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b858cb8d4d309b062c4d712fdff30e6d.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/d987e9aa816a8861e4c6fc02b3d89bf1.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/fbaab93baffecdf789e24143523dde47.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/6edb7c9c8c361a448a07e28c5a26c204.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/6df20f222a7809f6f2f51e324ebd592a.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=220614767&.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:-70px;left:35px;width:140px;height:140px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);z-index:

600;"/>
      </div>
<div class="img_border" id="aplay"></div>
   <div class="bs" style="width: 980px; height: 120px;z-index: 300;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;z-index: 300;
filter:contrast(120%)brightness(80%);-webkit-mask-image: radial-gradient(black 30% ,transparent 70%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {1% {
opacity: 0;
transform:translate(0%,-100%)scale(1);}
5% {
opacity: 1;
transform:translate(0%,-100%)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%,100%)scale(1);}
}

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: 1000px;height: 600px;
    margin: 0;position: absolute;top:500px; left:0px;}
.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;
    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: 45px;
    color: #ff0000;
    font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:0px;transform: scale(1,1);transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;
    z-index: 290;position: absolute;
   top:-500px;
    left: 0px;background: url(http://pan.yinhuabbs.cn/view.php/f8ca6d8130e06b7eb9441453c91fcdc1.jpg)0 0/100%100%;
animation: rotating 0.05s linear infinite;}
@keyframes rotating{0%{
      background-position: 0% 0;transform: scale(1);filter:hue-rotate(0deg)contrast(110%)brightness(200%);
    }
    100%{
      background-position: 0 0%;transform: scale(1.3);filter:hue-rotate(360deg)contrast(110%)brightness(120%);
    }
}
</style>
<style type="text/css">.bs{animation: slider0 0.26s linear infinite ;}
@keyframes slider0 {0%,100%{margin: 0px 0px;filter:hue-rotate(360deg)drop-shadow(0px 0px 12px #CD6600) drop-shadow(0px 0px 12px #CD6600)drop-shadow(0px 0px 12px #CD6600)

brightness(100%);}50%{margin: 0px 0px;filter:hue-rotate(0deg)drop-shadow(0px 0px 12px #000090)drop-shadow(0px 0px 12px #000090)drop-shadow(0px 0px 12px #000090)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="";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>

大猫咪 发表于 2022-5-22 12:35

制作真漂亮赏心悦目   歌美图靓   真棒！氺芙蓉周末快乐！

{:4_204:}{:4_199:}

醉美水芙蓉 发表于 2022-5-22 12:39

大猫咪 发表于 2022-5-22 12:35
制作真漂亮赏心悦目   歌美图靓   真棒！氺芙蓉周末快乐！

大猫咪周末愉快！

马黑黑 发表于 2022-5-22 12:40

又是漂酿的作品

醉美水芙蓉 发表于 2022-5-22 12:41

马黑黑 发表于 2022-5-22 12:40
又是漂酿的作品

黑黑老师周末欣赏愉快！

马黑黑 发表于 2022-5-22 13:04

醉美水芙蓉 发表于 2022-5-22 12:41
黑黑老师周末欣赏愉快！

{:5_108:}

加林森 发表于 2022-5-22 13:12

漂亮的制作，都是大美女。

红影 发表于 2022-5-22 13:29

漂亮的制作。水芙蓉又弄了新的图片轮播方式呢，好听的歌儿{:4_187:}

醉美水芙蓉 发表于 2022-5-22 15:16

加林森 发表于 2022-5-22 13:12
漂亮的制作，都是大美女。

队长周末愉快！

醉美水芙蓉 发表于 2022-5-22 15:17

红影 发表于 2022-5-22 13:29
漂亮的制作。水芙蓉又弄了新的图片轮播方式呢，好听的歌儿

红影美女周末愉快！

小辣椒 发表于 2022-5-22 16:50

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

加林森 发表于 2022-5-22 16:51

醉美水芙蓉 发表于 2022-5-22 15:16
队长周末愉快！

水芙蓉下午好，周末快乐！

查看完整版本: 多想你还能陪在我左右