论坛 › 欢乐水吧 › 我不在是那个少年

醉美水芙蓉 发表于 2022-5-28 13:35

我不在是那个少年

本帖最后由 醉美水芙蓉 于 2022-5-28 13:35 编辑 <br /><br /><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: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/30%30%,linear-gradient(80deg, #000080, #003300, #ff0000, #00f000); text-align: center;">
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/14ef5ec2484d53a008c2085bb274b109.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/a30fcaeab1f6dbe212c8fb68dbc0553a.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/994bb5403b614c94d63d8159dc661d3f.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/48eefdcb64c2f6bd511ca3c08b507833.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/7528c09863bdb73d791ecfdd35a7dfb2.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/79a87ff8aa534219cbb2d97eed7cf3a4.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/924d5e281ec04da1bd69163909493a60.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/510f98b9733c722e18a6f1bd2e87fd8c.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=219004552&.mp3" controls loop style="width: 0%;

height: 0%;z-index: 1;"></audio>
      <div class="btn">
      <img src="http://pan.yinhuabbs.cn/view.php/60810296157f9035d700f1ab475efcc3.png" id="playpause"style="position:absolute;top:40px;left:910px;width:40px;height:40px;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: 300;"/>
      
      </div>
<div class="img_border"><imgid="aplay"style="width: 100%; height: 100%;z-index: 110;background:url(http://pan.yinhuabbs.cn/view.php/a93202bcdcd7cc95412d1595f9ec0dba.png)0 0/100% 100%, url(https://img-baofun.zhhainiao.com/fs/034cea19b2399cee16cf409f6eb3de96.jpg)-10px 0px/180% 100%;filter:hue-rotate(0deg)contrast(130%)brightness(100%);" ></div>
   <div class="items" >
<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(130%)brightness(100%);
animation: round 32s infinite;
opacity: 0;}
@keyframes round {1% {
opacity: 1;clip-path:polygon(0 0, 0 0, 100% 100%, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
4% {
opacity: 1;clip-path: ppolygon(0 0, 100% 0, 100% 100%, 0 100%);
-webkit-transform:translate(0%,0%)scale(1);}
7% {
opacity: 1;clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
-webkit-transform:translate(0%,0%)scale(1);}
10% {
opacity: 0.6;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-webkit-transform:translate(0%,0%)scale(1);}
25% {
opacity: 0;clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
-webkit-transform:translate(0%,0%)scale(3);}
}

img:nth-child(8) {animation-delay: 28s;}
img:nth-child(7) {animation-delay: 24s;}
img:nth-child(6) {animation-delay: 20s;}
img:nth-child(5) {animation-delay: 16s;}
img:nth-child(4) {animation-delay: 12s;}
img:nth-child(3) {animation-delay: 8s;}
img:nth-child(2) {animation-delay: 4s;}
</style >

<style type="text/css">
.container{width: 1px;
    margin: 0;position: absolute;top:500px; left:-20px;z-index: 100;}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;}
.container .btn{
    display: block;z-index: 300;
    margin: 0;}
.container .lrc{
    width: 860px;
    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:80px;
    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:100px;height:100px;margin:0px ;position: absolute;top:-20px;left:40px;transform: scale(1,1);transform:rotateX(-45deg) rotateY(20deg) rotateZ(0deg);}
.container .img_border #aplay{display:block;border:2px solid #cccccc;border-radius:50%; }
.container .z360z{-webkit-animation:rotating 10s linear infinite;}@-webkit-keyframes rotating{
0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(-360deg);filter:hue-rotate(360deg)contrast(130%)brightness(100%);}
}

</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 = ` 我不在是那个少年
词：张瑞军
曲：张瑞军
演唱：李英
发行：歌娱文化
过了一年又一年
有谁能懂我心酸
孤独的夜里又失眠
全是寂寞和孤单
时光匆匆青春永不返
转眼不在是那个少年
想想这些年真的好心烦
钱没挣到已到中年
我已不在是那个少年
多年以后容颜改变
花白的头发苍老的容颜
如今还有谁陪伴我身边
我已不在是那个少年
一个人生活真的好孤单
想想过去真的好心酸
谁能陪我共度晚年
时光匆匆青春永不返
转眼不在是那个少年
想想这些年真的好心烦
钱没挣到已到中年
我已不在是那个少年
多年以后容颜改变
花白的头发苍老的容颜
如今还有谁陪伴我身边
我已不在是那个少年
一个人生活真的好孤单
想想过去真的好心酸
谁能陪我共度晚年
我已不在是那个少年
一个人生活真的好孤单
想想过去真的好心酸
谁能陪我共度晚年
谁能陪我共度晚年
谢谢欣赏！`;
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://pan.yinhuabbs.cn/view.php/35b530b3868a28afe2b97da37543395f.png";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://pan.yinhuabbs.cn/view.php/60810296157f9035d700f1ab475efcc3.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-5-28 13:45

好听的歌曲。辛苦水芙蓉啦。{:4_204:}{:4_190:}

梦油 发表于 2022-5-28 15:49

欣赏佳作，问候醉美水芙蓉。

红影 发表于 2022-5-28 16:01

漂亮的图片轮播和动态效果。欣赏水芙蓉好帖{:4_187:}

醉美水芙蓉 发表于 2022-5-28 16:20

加林森 发表于 2022-5-28 13:45
好听的歌曲。辛苦水芙蓉啦。

队长欣赏愉快！

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

梦油 发表于 2022-5-28 15:49
欣赏佳作，问候醉美水芙蓉。

问好梦油老师！

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

红影 发表于 2022-5-28 16:01
漂亮的图片轮播和动态效果。欣赏水芙蓉好帖

谢谢红影美女欣赏支持！

梦油 发表于 2022-5-28 16:36

醉美水芙蓉 发表于 2022-5-28 16:21
问好梦油老师！

精美制作令人赞叹啊！

加林森 发表于 2022-5-28 17:59

醉美水芙蓉 发表于 2022-5-28 16:20
队长欣赏愉快！

嗯嗯，大家共享很好的。

查看完整版本: 我不在是那个少年