论坛 › 欢乐水吧 › 活着就是幸福

醉美水芙蓉 发表于 2022-7-26 21:51

活着就是幸福

本帖最后由 醉美水芙蓉 于 2022-7-26 21:50 编辑 <br /><br /><div style="z-index: 127;width: 1100px; height: 620px; margin-top:30px; margin-left:-230px;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/12/22031213462674835656.gif)0 0/40% 100%,url(https://s1.ax1x.com/2022/07/26/vSEQxI.jpg)0 0/100% 100%;text-align: center;">
<img class='photo'src="https://s1.ax1x.com/2022/07/26/vSEYdS.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/26/vSEJZ8.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/26/vSE8qf.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/26/vSE3sP.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/26/vSE1Mt.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/26/vSEKGd.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/26/vSEZVO.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/26/vSEAr6.jpg " alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=227427561&.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
      <div class="btn">
         <img src="https://s1.ax1x.com/2022/07/26/vSVJ61.png" id="playpause"style="position:absolute;top:-35px;left:35px;width:150px;height:150px;z-index: 600;"/>
      </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: 60%;
height: 60%;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 5px #880000;
position: absolute;top:115px; left:220px;
filter:contrast(120%)brightness(100%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {0% {opacity: 1;transform:perspective(900px) rotateY(-180deg)scale(1);}

5% {opacity: 1;transform:perspective(900px)rotateY(0deg)scale(1)}

9% {opacity: 1;transform:perspective(400px) rotateX(-180deg)scale(1);}
13% {opacity: 1;transform:perspective(600px) rotateX(90deg)scale(1);}
18% {opacity: 0;transform:perspective(600px) rotateX(90deg)scale(1);}


}

img:nth-child(1) {animation-delay: 42s;}
img:nth-child(2) {animation-delay: 36s;}
img:nth-child(3) {animation-delay: 30s;}
img:nth-child(4) {animation-delay: 24s;}
img:nth-child(5) {animation-delay: 18s;}
img:nth-child(6) {animation-delay: 12s;}
img:nth-child(7) {animation-delay: 6s;}
img:nth-child(8) {animation-delay: 0s;}
</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: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:1100px;height:620px;margin:0px ;position: absolute;top:0px;left:00px;}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1100px; height: 620px;
    z-index: 13;position: absolute;
   top:-500px;
    left: 0px;
animation: rotating 0.05s linear infinite;}
@keyframes rotating {
0%{opacity: 1;background: linear-gradient(6deg, rgba(251, 81, 81, 0.33) 13%,rgba(106, 80, 240, 0.07) 47%,rgba(65, 185, 41, 0.42) 85%);}
50% {opacity: 1;background: linear-gradient(6deg, rgba(114, 251, 81, 0.33) 13%,rgba(240, 184, 80, 0.05) 47%,rgba(185, 41, 45, 0.42) 87%);}
100%{opacity: 1;background: linear-gradient(6deg, rgba(251, 81, 81, 0.33) 13%,rgba(80, 240, 215, 0.11) 47%,rgba(26, 77, 251, 0.42) 87%);}
}
</style>
<style type="text/css">.items{ animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
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="https://s1.ax1x.com/2022/07/26/vSVJ61.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-7-26 21:59

挺好的！{:4_190:}

醉美水芙蓉 发表于 2022-7-26 22:42

加林森 发表于 2022-7-26 21:59
挺好的！

谢谢队长光临！

红影 发表于 2022-7-26 22:44

大图和小图都很漂亮，真好看的制作{:4_187:}

醉美水芙蓉 发表于 2022-7-26 22:48

红影 发表于 2022-7-26 22:44
大图和小图都很漂亮，真好看的制作

谢谢红影美女鼓励！

马黑黑 发表于 2022-7-26 22:52

图片加载不正常

醉美水芙蓉 发表于 2022-7-26 22:54

马黑黑 发表于 2022-7-26 22:52
图片加载不正常

一开始有点，后来就好了！

加林森 发表于 2022-7-26 22:58

醉美水芙蓉 发表于 2022-7-26 22:42
谢谢队长光临！

不客气。

马黑黑 发表于 2022-7-26 23:56

醉美水芙蓉 发表于 2022-7-26 22:54
一开始有点，后来就好了！

嗯嗯，需要点时间，可能是我的网今晚太热了

浣溪沙 发表于 2022-7-27 08:59

高手！{:4_178:}

查看完整版本: 活着就是幸福