论坛 › 欢乐水吧 › 海鸟飞飞

醉美水芙蓉 发表于 2022-6-8 21:20

海鸟飞飞

<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/95fe181e1614601d8707149cb5056c70.jpg)0 0/50%50%; 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=221872107&.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(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(-100%,0%)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:-40px; 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: 60px;
font-family:华文隶书;
    font-size: 30px;
    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;opacity: 1;
    left: 0px;background: url(http://pan.yinhuabbs.cn/view.php/95fe181e1614601d8707149cb5056c70.jpg)0 0/50% 50%;
animation: rotating 6s linear infinite;}
@keyframes rotating{0%{
      background-position: 600% 0;transform: scale(1,1);filter:hue-rotate(0deg)contrast(110%)brightness(200%);
    }
    100%{
      background-position: 0 -600%;transform: scale(1,1.5);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默涵版)
作词：刘艺新
作曲：刘艺新
编曲：DJ默涵
合声：凌菲
制作人：笑天
啊海鸟飞飞飞天空
海浪轻轻拍打我心
耳边轻抚过阵阵微风
不知我们何时再相逢
啊海鸟飞飞飞天空
海风吹起浪花涌动
期盼着与你再次相拥
牵手走过每个春夏秋冬
红尘情路一场梦
有哭有笑还有痛
多少次为爱泪眼朦胧
迟迟分不清南北西东
悲欢离合谁人懂
爱也匆匆恨也匆匆
狂笑一声啊苍天捉弄
恩怨是非全都藏心中
啊海鸟飞飞飞天空
海浪轻轻拍打我心
耳边轻抚过阵阵微风
不知我们何时再相逢
啊海鸟飞飞飞天空
海风吹起浪花涌动
期盼着与你再次相拥
牵手走过每个春夏秋冬
悲欢离合谁人懂
爱也匆匆恨也匆匆
狂笑一声啊苍天捉弄
恩怨是非全都藏心中
啊海鸟飞飞飞天空
海浪轻轻拍打我心
耳边轻抚过阵阵微风
不知我们何时再相逢
啊海鸟飞飞飞天空
海风吹起浪花涌动
期盼着与你再次相拥
牵手走过每个春夏秋冬
啊海鸟飞飞飞天空
海浪轻轻拍打我心
耳边轻抚过阵阵微风
不知我们何时再相逢
啊海鸟飞飞飞天空
海风吹起浪花涌动
期盼着与你再次相拥
牵手走过每个春夏秋冬
牵手走过每个春夏秋冬
谢谢欣赏！`;
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>
</td></tr></table>

红影 发表于 2022-6-8 21:51

真漂亮的动态效果和美女图，欣赏水芙蓉票的制作{:4_187:}

马黑黑 发表于 2022-6-8 22:06

镁铝都青春靓丽哈

加林森 发表于 2022-6-8 22:25

水芙蓉的制作都是大美女啊。{:4_189:}

加林森 发表于 2022-6-8 22:28

好像代码有点问题的。是不是多了结束的代码啊？

查看完整版本: 海鸟飞飞