论坛 › 动画音画 › 旧梦 (DJ默涵版) - 刘晓超

亚伦影音工作室 发表于 2022-6-28 13:43

旧梦 (DJ默涵版) - 刘晓超

本帖最后由 亚伦影音工作室 于 2022-6-28 13:43 编辑 <br /><br /><div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-130px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow:
hidden;transform:rotate(0deg);background: url(https://img-baofun.zhhainiao.com/fs/dc7180c65ecd6bc2bd465c8f8187bf4c.jpg)0 0/100%100%; text-align: center;">
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/fd4a9b89a939aedd51b50b5b8f91a6e4.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/3fd3685dc30d76e7ce4f01dcae16a992.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/f7675c5c107944f918884e444f0bd39d.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/b30257f83a3f3938ed4da1918fb7cd93.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/a062ebc308bdfdbda31e8644c9b73a05.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/7d40cc25e5ad0ddb40f62ef62a86299f.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/6edb7c9c8c361a448a07e28c5a26c204.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/6df20f222a7809f6f2f51e324ebd592a.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=221363830" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
   
       <button id="picBtn" class="picBtn"style="position: absolute;top:-60px; left:40px;z-index: 400;"></button>
      
<div class="img_border" id="aplay"></div>
   <div class="b" style="width: 1200px; height: 120px;z-index: 300;position: absolute;top:0px; left:0px;">


<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;z-index: 300;
filter:contrast(120%)brightness(80%);-webkit-mask-image: radial-gradient(black 30% ,transparent 70%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {1% {
opacity: 0;
transform:translate(0%,0%)scale(0);}
10% {
opacity: 1;
transform:translate(0%,0%)scale(1);}

20% {
opacity: 0.5;
transform:translate(0%,0%)scale(2);}
22% {
opacity: 0;
transform:translate(0%,0%)scale(2);}
}

img:nth-child(8) {animation-delay: 42s;}
img:nth-child(7) {animation-delay: 36s;}
img:nth-child(6) {animation-delay: 30s;}
img:nth-child(5) {animation-delay: 24s;}
img:nth-child(4) {animation-delay: 18s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}
</style >

<style type="text/css">
.picBtn {
   
      width: 80px;
      height: 142px;
      border: none;
      outline: none;
      border-radius: 8px;
      background: transparent url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.gif') no-repeat;
      cursor: pointer;
      
</style>
<script language="javascript">

var mu = document.getElementById('MusicPlayer');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.gif')") : (mu.pause(), btn.style.background="url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.png')");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.png')";
})

</script>



<style type="text/css">
.container{width: 0px;height: 0px;
    margin: 0;position: absolute;top:500px; left:0px;}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;}
.container .btn{
    display: block;
    margin: 0;}
.container .lrc{
    width: 960px;
    height: 160px;
    overflow: hidden;
    display: block;position: absolute;top:-80px; left:50px;
    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: 50px;
    line-height: 50px;
font-family:华文新魏;
    font-size: 30px;
    color: #ffffff;
    font-weight: normal;-webkit-text-stroke:1px #000000;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
    text-align: center;font-weight:bold;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
    font-size: 50px;
    color: #ff0000;-webkit-text-stroke:1px #FFFFFF;
    font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:0px;transform: scale(1,1);transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;
    z-index: 290;position: absolute;
   top:-500px;opacity: 1;
    left: 0px;background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%, url(https://img-baofun.zhhainiao.com/fs/dc7180c65ecd6bc2bd465c8f8187bf4c.jpg)0 0/100% 100%;
animation: rotating 0.2s linear infinite;}
@keyframes rotating{0%{
      background-position: 0% 0;transform: scale(1,1)rotate(0deg);filter:hue-rotate(0deg)contrast(110%)brightness(200%);
    }
    100%{
      background-position: 0 0%;transform: scale(1.2);filter:hue-rotate(360deg)contrast(110%)brightness(120%);
    }
}
</style>
<style type="text/css">.bs{animation: slider0 0.01s linear infinite ;}
@keyframes slider0 {0%,100%{margin: 0px 0px;filter:hue-rotate(360deg)drop-shadow(0px 0px 2px #CD6600) drop-shadow(0px 0px 2px #CD6600)drop-shadow(0px 0px 2px #CD6600)

brightness(100%);}50%{margin: 0px 0px;filter:hue-rotate(0deg)drop-shadow(0px 0px 2px #000090)drop-shadow(0px 0px 2px #000090)drop-shadow(0px 0px 2px #000090)brightness(300%);}}
</style>
<script >var lrc = `告别缘份退出红尘（DJ默涵版）-米灵
作词：画地为牢
作曲：张瑞军
制作人：亚伦
OP：亚伦影音工作室
夜又深了几分
思念开始不安份
举目望远方的星辰
无依无靠的犹如孤魂
恨自己太天真
相信你说的缘份
无法自拔中毒太深
忘记了回家的那扇门
我要告别缘份退出红尘
做一个绝缘的人
不再苦闷不再分神
不再空等梦中的人
我要告别缘份退出红尘
做一个快乐的人
没有情深没有爱恨
没有想见见不到的人
恨自己太天真
相信你说的缘份
无法自拔中毒太深
忘记了回家的那扇门
我要告别缘份退出红尘
做一个绝缘的人
不再苦闷不再分神
不再空等梦中的人
我要告别缘份退出红尘
做一个快乐的人
没有情深没有爱恨
没有想见见不到的人
我要告别缘份退出红尘
做一个绝缘的人
不再苦闷不再分神
不再空等梦中的人
我要告别缘份退出红尘
做一个快乐的人
没有情深没有爱恨
没有想见见不到的人`;
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 = 50, lrc_ul_height = 160;
    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 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-6-28 13:47

js播放器简介：点击耳麦动态 音乐，歌词，特效均停止，反之音乐 歌词，特效均开启。

提示：若显示异常请留言！

回忆 发表于 2022-6-28 14:02

用了小辣椒昨天刚制作的播放器按钮{:4_173:}

红影 发表于 2022-6-28 15:54

歌曲热烈，画面漂亮。欣赏亚伦老师好帖{:4_204:}

红影 发表于 2022-6-28 15:54

回忆 发表于 2022-6-28 14:02
用了小辣椒昨天刚制作的播放器按钮

我也刚想说，这个按钮是小辣椒用过的{:4_173:}

查看完整版本: 旧梦 (DJ默涵版) - 刘晓超