论坛 › 欢乐水吧 › 拼命活着为什么 (DJ默涵版)

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

拼命活着为什么 (DJ默涵版)

本帖最后由 醉美水芙蓉 于 2022-8-21 21:21 编辑 <br /><br /><div style="z-index: 127;width: 1024px; height: 600px; margin-top:50px; margin-left:-210px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/bd6af11966561814bed2f8a42a14d2e8.jpg)0 0/100%100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000); text-align: center;">
<div class="HT">
<divid="testImg" class="love">
</div>
<audio autoplay=""id="MusicPlayer"src="https://www.qqmc.com/up/kwlink.php?id=233034081&.mp3" loop="" ></audio>
      <div class="btn">
   <divid="testImg"id="bf"onclick="bf()"><input type="button"id="testBtn"value="暂停"style="width: 100px; height: 40px;border-radius: 0%;color: #000000;font-size:20px;font-weight:bold;border:1px solid #000000;"></div>
</div>
<div class="img_border"><imgid="aplay"style="width: 100%; height: 100%;z-index: 150;background: url(http://image.hnol.net/c/2022-01/05/16/202201051650422421-5769293.png)0 0/50% 80%;z-index: 10;" ></div>

<div class="lrc">
       <div class="items"> <ul id="ullrc">
         </ul>
      </div></div>
</div>
</div></div>
<style type="text/css">
.love {margin: 0 auto;
    display: block;
    width: 1024px; height: 600px;box-shadow: 0px 0px 0px 1px #ffffff, 0px 0px 0px 8px #880000;
    background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e38eb827c4f963b64b5c74af2dd9fa6c.jpg) 0 0/100% 100%;
animation: heart-burst 46s infinite ;
}
.stop {
    animation-play-state: paused;
}
@keyframes heart-burst {
5% {opacity: 1;clip-path: circle(0 at 50% 100%);-webkit-transform:scale(1)}
10% {opacity: 1;clip-path: circle(100% at 50% 100%);-webkit-transform:scale(1);}
15% {opacity: 1;clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%);}
20% {opacity: 1;clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);}
25% {opacity: 1;transform: scale(1);clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%)}
35% {opacity: 1;clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);}
40% {opacity: 1;clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);}
45% {opacity: 1;clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);}
50% {opacity: 1;clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);}
55% {opacity: 1;clip-path: polygon(50% 100%, 50% 0%, 0% 0%, 100% 0%, 50% 0%);}
60% {opacity: 1;clip-path: polygon(50% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);}
65% {opacity: 1;clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);}
70% {opacity: 1;clip-path: polygon(50% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);}
75% {opacity: 1;clip-path: polygon(50% 100%, 50% 0%, 0% 0%, 100% 0%, 50% 0%);}
80% {opacity: 1;clip-path: circle(0 at 50% 50%);}
85% {opacity: 1;clip-path: circle(80% at 50% 50%);}
90% {opacity: 1;clip-path: circle(0 at 50% 50%);}
95% {opacity: 1;clip-path: circle(80% at 50% 50%);}
}
</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 image = document.getElementById("testImg"),
    button = document.getElementById("testBtn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '暂停') {
            image.classList.add('stop');
            this.value = '播放';
      } else {
            image.classList.remove('stop');
            this.value = '暂停';
      }
    };
}
</script>
<style type="text/css">
.HT{
    width: 1000px;position: absolute;top:0px; left:0px;
}
#MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.btn{
    display: block;z-index: 300;
    margin: 0px 0px;position: absolute;top:540px; left:80px;
}
.lrc{
    width: 870px;
    height: 140px;
    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:480px; left:80px;z-index: 30;
    margin: 0 auto;
}
.container .lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 80px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;transform: translate(0%,0%);
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
    text-align: center;
    display: block;
    width: 100%;
    margin: 0 auto;

}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 45px;
    color: #ff0000;transform: translate(0%,0%);
    font-weight: bold;
}
/*动画*/
.img_border{display:inline-block;width:1024px;height:600px;margin:0px ;position: absolute;top:0px; left:0px;z-index: 10;}
.img_border #aplay{ }
.z360z{width: 1024px; height: 600px;
    z-index: 13;opacity: 1;position: absolute;
    margin-top:0px;
    left: 0px;
animation: rotating 40s linear infinite;}
@keyframes rotating {
    0%{
      background-position: 600% 0;
    }
    100%{
      background-position: 0 600%;filter:hue-rotate(360deg)
    }
}
</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 = 80, lrc_ul_height = 70;
    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>
         function bf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            if (audio !== null) {
                if (audio.paused) {
                  audio.play(); //audio.play();// 这个就是播放
                  bf.innerText="暂停";
                } else {
                  audio.pause(); // 这个就是暂停
                  bf.innerText="播放";
                }
            }
      }
    </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-8-21 21:41

闪亮的作品。。。。问好芙蓉才女

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

青青子衿 发表于 2022-8-21 21:41
闪亮的作品。。。。问好芙蓉才女

问候朋友晚上好！

加林森 发表于 2022-8-21 22:32

漂亮的美女。要晕人的！{:4_189:}

东篱闲人 发表于 2022-8-21 22:42

代码效果极好。只是这飘动的花，好像显得有点乱。。。{:5_116:}

红影 发表于 2022-8-21 22:43

漂亮的制作，图片轮播效果特别好{:4_187:}

醉美水芙蓉 发表于 2022-8-22 06:41

加林森 发表于 2022-8-21 22:32
漂亮的美女。要晕人的！

谢谢队长点评！

醉美水芙蓉 发表于 2022-8-22 06:42

东篱闲人 发表于 2022-8-21 22:42
代码效果极好。只是这飘动的花，好像显得有点乱。。。

谢谢东篱老师点评！

醉美水芙蓉 发表于 2022-8-22 06:42

红影 发表于 2022-8-21 22:43
漂亮的制作，图片轮播效果特别好

谢谢红影美女点评！

马黑黑 发表于 2022-8-22 07:05

加林森 发表于 2022-8-21 22:32
漂亮的美女。要晕人的！

队长有镁铝免疫力{:5_106:}

加林森 发表于 2022-8-22 08:20

醉美水芙蓉 发表于 2022-8-22 06:41
谢谢队长点评！

{:4_190:}

加林森 发表于 2022-8-22 08:21

马黑黑 发表于 2022-8-22 07:05
队长有镁铝免疫力

{:4_181:}

东篱闲人 发表于 2022-8-22 11:01

醉美水芙蓉 发表于 2022-8-22 06:42
谢谢东篱老师点评！

谈不上点评，俺是瞎说。。。{:5_117:}

查看完整版本: 拼命活着为什么 (DJ默涵版)