论坛 › 欢乐水吧 › 你的万水千山(DJ版)(cover: 海来阿木) - 宋小睿

亚伦影音工作室 发表于 2022-8-5 16:39

你的万水千山(DJ版)(cover: 海来阿木) - 宋小睿

本帖最后由 亚伦影音工作室 于 2022-8-5 16:39 编辑 <br /><br /><style>
.container0 {
margin: 50px -150px;
width: 1024px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;
height: 620px;
border: 1px solid;
background: #333 url('http://pan.yinhuabbs.cn/view.php/044b174acb60712e6aa040353d2e42ac.jpg') no-repeat center/cover; overflow: hidden;
position: relative;
}

.photo {
position: absolute;top:0px; left:0px;
width: 100%;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #880000;
height: 100%;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:rotateX(-180deg) translateZ(10.90909px);}


8% {opacity: 1;transform: perspective(600px) rotateY(45deg)scale(0.6)}
15% {opacity: 1;transform: perspective(600px) rotateY(-45deg)scale(0.6)}
18% {opacity: 0;transform: perspective(600px) rotateY(0deg)scale(1.8)}
}

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;}
img:nth-child(1) {animation-delay: 0s;}
    </style>


<div class="container0">
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/5bd0e401ff41f775ea90c53332121845.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/084ca0507927d902002706a29c1d50a6.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/e34046a3fa089d4ad71ebe3a2f744f8a.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/8307a0bb62eb7cb0edd702751d16a8c0.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/0f4724fca6761c5206611cadda8bd04d.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/a4cdfada95acd2eae40cff8f16a7a2b3.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/91833d08d1960e25490b8e5fd512ad46.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/90ec58214285e3d4218726fd29196ba8.jpg" alt="" />

<div class="bj">
      <div class="btn">
      <span id="bf"onclick="bf();"style="width: 120px; height: 120px;z-index: 550;position: absolute;top:-60px; left:880px;"></span>
       </div>
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=146128855&.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
<div class="img_border"><img src="http://pan.yinhuabbs.cn/view.php/caef5d12b92eaa7fad771e288f5cb7c9.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">
.bj{margin: 0;position: absolute;top:500px; left:-30px;z-index: 550;}

.btn{display: block;margin: 0;}
.lrc{width: 960px;
    height: 120px;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;
    margin: -40px -220px;
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;/*一定要加上不然看着突兀*/
    margin: 0 0px;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 60px;
    line-height: 60px;
font-family:悟空大字库;
    font-size: 35px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
    text-align: center;
    display: block;
    width: 100%;
    margin: 0 250px;

}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 35px;
    color: #ff0000;
    font-weight: bold;margin: 0 0px;
}
/*光碟动画*/
.img_border{display:inline-block;width:120px;height:120px;margin:0px ;position: absolute;top:-60px; left:880px;z-index: 150;}
.img_border #aplay{ }
.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);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg)scale(2);}
}
</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 = `你的万水千山(DJ版)(cover: 海来阿木) - 宋小睿
我曾经等过你
因为我也相信
你说的万水千山细水长流
孤单的人心易碎
未曾放下的人怕回忆
早已习惯与孤独缠绵
让深夜的眼泪颠沛流离
你何必假装快乐
我何必真心难过
谁也没有开口说抱歉
我带上了烟酒四处流浪
我曾经等过你
因为我也相信
你说的万水千山细水长流
如今不能再爱你
让暖阳护你周全
若再次的邂逅于人海
也还爱你
你何必假装快乐
我何必真心难过
谁也没有开口说抱歉
我带上了烟酒四处流浪
我曾经等过你
因为我也相信
你说的万水千山细水长流
如今不能再爱你
让暖阳护你周全
若再次的邂逅于人海
也还爱你
我曾经等过你
因为我也相信
你说的万水千山细水长流
如今不能再爱你
让暖阳护你周全
若再次的邂逅于人海
也还爱你
若再次的邂逅于人海
也还爱你`;
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 = 60, lrc_ul_height = 60;
    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(lrc);
</script>

红影 发表于 2022-8-5 21:06

灵动的图片轮播好漂亮，欣赏亚伦老师好帖{:4_187:}

马黑黑 发表于 2022-8-5 21:29

美不胜收又眼花缭乱{:4_190:}

小辣椒 发表于 2022-8-5 21:48

看不见图图，看了里面的链接，你是http，没有带s的原因

小辣椒 发表于 2022-8-5 21:50

http://pan.yinhuabbs.cn/view.php/5bd0e401ff41f775ea90c53332121845.jpg

很喜欢的一首DJ音乐，也是做过帖

查看完整版本: 你的万水千山(DJ版)(cover: 海来阿木) - 宋小睿