论坛 › 欢乐水吧 › 再唱红尘花一朵

醉美水芙蓉 发表于 2022-7-13 17:48

再唱红尘花一朵

本帖最后由 醉美水芙蓉 于 2022-7-13 17:48 编辑 <br /><br /><style>
.container0 {
margin: 50px -200px;
width: 1024px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;
height: 620px;
border: 1px solid;
background: #333 url('https://img-baofun.zhhainiao.com/fs/8f9145aa6fb76b783c082c140ff380bb.jpg') no-repeat center/cover; overflow: hidden;
position: relative;
}

.photo {
position: absolute;top:120px; left:200px;
width: 60%;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #880000;
height: 60%;transform:perspective(00px); background:
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
   url("");
background-size: 0, cover;
box-sizing: border-box;preserve-3d;
animation: round 32s infinite;
opacity: 0;
}
@keyframes round {
    0% {opacity: 1;transform: perspective(700px) rotateY(45deg);}


8% {opacity: 1;transform:perspective(700px) rotateY(-45deg);}

18% {opacity: 0;transform:perspective(700px) rotateY(45deg);}
}

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


<div class="container0">
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/83883226503952934b6493bee1a4a807.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/37741b960c8f480a672e1034f9f8b215.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/527ad763946ed16fe68b4aab9ad77e7d.jpg " alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/fb64822a0234b97cd7b50c8d6e1cef71.jpg " alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/2e73c83b3eaee6827d641ed8ac3adc7d.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/3e3722d16a5a12427e023a8950ae99d3.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/e13c69a1bbf080245d4ddf5aec1dd857.jpg" alt="" />
<img class='photo'src=" https://img-baofun.zhhainiao.com/fs/1e50933ee8e35dc43d4eed201c41c7b3.jpg" alt="" />

<div class="container">
      <div class="btn">
      <span id="bf"onclick="bf();"style="width: 120px; height: 120px;z-index: 550;position: absolute;top:-60px; left:880px;"></span>
      <span id="bf"onclick="rbf();"></span>
      </div>
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=226870233&.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
<div class="img_border"><img src="https://s1.ax1x.com/2022/07/09/jDs24O.png" id="aplay"style="width: 100%; height: 100%;z-index: 550;" ></div>
   <div class="items" >
<divclass="lrc">
      <ul id="ullrc">
         </ul>
      </div>
</div>
</div>


<style type="text/css">
.container{width: 1px;height: 1px;
    margin: 0;position: absolute;top:500px; left:-30px;z-index: 550;
}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.container .btn{
    display: block;
    margin: 0;
}
.container .lrc{
    width: 960px;
    height: 180px;z-index: 550;
    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:-70px; left:0px;
    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: 80px;
    line-height: 90px;
font-family:悟空大字库;
    font-size: 30px;
    color: #000078;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    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;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    font-weight: bold;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:120px;height:120px;margin:0px ;position: absolute;top:-60px; left:880px;z-index: 150;}
.container .img_border #aplay{ }
.container .z360z{-webkit-animation:rotating 10s linear infinite;animation:rotating 10s linear infinite}@-webkit-keyframes rotating{0% {transform: rotateX(0deg) rotateY(0deg)
rotateZ(0deg)scale(0.2);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-30deg)scale(2.5);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg)scale(2.5);}
}
.audio{
    z-index: 1;
    bottom: 0;
    opacity: 0;
transition: all 2s;
width: 1px;
height: 1px;
position: absolute;top:0px; left:0px;
}
.audio:hover{
    opacity: 0;
}
</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>

<style type="text/css">.items1{ animation: slider1 1s linear infinite ;}
@keyframes slider1 {from {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(80%);}
to {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%);}}
</style>
<script >var lrc = `卢喃、唐大鹏 - 再唱红尘花一朵
作词：唐大鹏
作曲：唐大鹏
编曲：徐晴超
录音：刘成刚
后期：冯鑫阳
和声：小佑
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 = 90;
    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 rbf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            audio.currentTime = 0;
            audio.play();
            bf.innerText="";
      }

      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-7-13 18:04

亚伦风格的佳作。欣赏。

醉美水芙蓉 发表于 2022-7-13 18:35

马黑黑 发表于 2022-7-13 18:04
亚伦风格的佳作。欣赏。

刚学的！

马黑黑 发表于 2022-7-13 18:46

醉美水芙蓉 发表于 2022-7-13 18:35
刚学的！

非常优秀！

绿叶清舟 发表于 2022-7-13 18:57

好听，制作真棒

醉美水芙蓉 发表于 2022-7-13 18:58

绿叶清舟 发表于 2022-7-13 18:57
好听，制作真棒

清舟美女晚上好！

绿叶清舟 发表于 2022-7-13 19:00

醉美水芙蓉 发表于 2022-7-13 18:58
清舟美女晚上好！

芙蓉好

小辣椒 发表于 2022-7-13 20:28

这个模板好像玩的人有好几个

水芙蓉制作很漂亮{:4_187:}

红影 发表于 2022-7-13 20:34

真绚丽多彩的制作，水芙蓉真棒{:4_199:}

醉美水芙蓉 发表于 2022-7-13 21:18

小辣椒 发表于 2022-7-13 20:28
这个模板好像玩的人有好几个

水芙蓉制作很漂亮

谢谢小辣椒欣赏支持！

醉美水芙蓉 发表于 2022-7-13 21:18

红影 发表于 2022-7-13 20:34
真绚丽多彩的制作，水芙蓉真棒

谢谢红影欣赏支持！

加林森 发表于 2022-7-13 23:02

挺好的。我电脑出问题了。

醉美水芙蓉 发表于 2022-7-13 23:09

加林森 发表于 2022-7-13 23:02
挺好的。我电脑出问题了。

不是前几天听你说刚修复嘛，怎么又出问题了呢？

加林森 发表于 2022-7-13 23:22

醉美水芙蓉 发表于 2022-7-13 23:09
不是前几天听你说刚修复嘛，怎么又出问题了呢？

还在研究呢。

樵歌 发表于 2022-7-14 08:02

欣赏画中画，歌儿也特别好听{:4_187:}

醉美水芙蓉 发表于 2022-7-14 11:40

樵歌 发表于 2022-7-14 08:02
欣赏画中画，歌儿也特别好听

谢谢樵歌支持！

红影 发表于 2022-7-14 12:54

醉美水芙蓉 发表于 2022-7-13 21:18
谢谢红影欣赏支持！

问好水芙蓉，下午好{:4_204:}

大猫咪 发表于 2022-7-14 13:05

图美丽歌靓，非常棒的制作！ 现在听真舒服！

{:4_187:}{:4_190:}

樵歌 发表于 2022-7-16 09:27

醉美水芙蓉 发表于 2022-7-14 11:40
谢谢樵歌支持！

芙蓉美女好谦虚呢{:4_187:}

查看完整版本: 再唱红尘花一朵