论坛 › 动画音画 › 金久哲_干就完了[自定义唱片按钮]

亚伦影音工作室 发表于 2022-7-16 22:23

金久哲_干就完了[自定义唱片按钮]

本帖最后由 亚伦影音工作室 于 2022-7-16 22:24 编辑 <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/2db0d0366557cd0adf5769bd61637384.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: translateX(-503px)translateY(-100px) rotate(130deg) rotateY(-50deg) rotateX(100deg) scale(0.2);filter:hue-rotate(360deg)}


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(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="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="container">
   
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=140163861&.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
<div class="items1"style="transform: scale(.55);position: absolute;top:-130px; left:750px;z-index: 70;">
<div class="img_border" id="aplay" style="width: 150px; height: 150px;background: url(https://img-baofun.zhhainiao.com/fs/1e44714e0018e73d7831a10b7ffdaa54.jpg)-30px 0px/160% 100%;position: absolute;top:70px; left:40px;z-index: 20;border-radius:50%;border:85px solid #800000; box-shadow: 0px 0px 5px #ffffff;"></div><P id="picBtn" class=""style="width: 450px; height: 450px;position: absolute;top:-30px; left:0px;background: url('http://pan.yinhuabbs.cn/view.php/6849264b2d30ed1a053a208960fd4217.png') 0 0/100% 100%;z-index: 20;"></p></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:-30px; 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: 0px;
    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;
    font-weight: bold;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:400px;height:400px;margin:0px ;position: absolute;text-align: center;}
.container .img_border #aplay{ }
.container .z360z{ width:400px;height:400px;animation: rot 10s linear infinite;}@keyframes rot{0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);}
}
.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 = `金久哲_干就完了[Dj何鹏_Remix
词：张天赋/张丰
曲：金久哲
人生的道路难免大起大落
拿得起放得下别瞎琢磨
举起杯走一个何必上火
同样的世界不一样的我
辉煌的时刻要靠自己拼搏
脚下路怎么走自己掌握
别计较成与败结果如何
放开手就是干 俗话就是壳
干就完了 干就完了
干出个样来给自己看呐
干就完了 干就完了
就算再高的山也在我脚下
干就完了 干就完了
干出个样来孝敬爹妈
干就完了 干就完了
干出个未来让梦想开花
人生的道路难免大起大落
拿得起放得下别瞎琢磨
举起杯走一个何必上火
同样的世界不一样的我
辉煌的时刻要靠自己拼搏
脚下路怎么走自己掌握
别计较成与败结果如何
放开手就是干 俗话就是壳
干就完了 干就完了
干出个样来给自己看呐
干就完了 干就完了
就算再高的山也在我脚下
干就完了 干就完了
干出个样来孝敬爹妈
干就完了 干就完了
干出个未来让梦想开花
干就完了 干就完了
干出个样来给自己看呐
干就完了 干就完了
就算再高的山也在我脚下
干就完了 干就完了
干出个样来孝敬爹妈
干就完了 干就完了
干出个未来让梦想开花`;
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 language="javascript">

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

btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('http://pan.yinhuabbs.cn/view.php/6849264b2d30ed1a053a208960fd4217.png')0 0/100% 100%") : (mu.pause(), btn.style.background="url('http://pan.yinhuabbs.cn/view.php/cf946a6cf4e140cd29f4e757fd291bec.png')0 0/100% 100%");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('http://pan.yinhuabbs.cn/view.php/cf946a6cf4e140cd29f4e757fd291bec.png')0 0/100% 100%";
})


</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-16 22:36

制作真美。这歌曲也很有趣。欣赏亚伦老师好帖{:4_187:}

马黑黑 发表于 2022-7-16 23:07

经典作品。但是图片我这里打不开

查看完整版本: 金久哲_干就完了[自定义唱片按钮]