亚伦影音工作室 发表于 2022-7-5 23:33

转眼我们都老了 - 王爱华

<style>
.papa { left: -220px; width: 1100px; height: 620px; border-radius: 6px; background:url(https://img-baofun.zhhainiao.com/fs/75cfb9ec0e649a106147d47f032a2090.jpg)0 0/100% 100%; overflow: hidden; box-shadow: 4px 4px 8px #000; position: relative; }

.papa::before, .papa::after { position: absolute;content: '';border-radius: inherit; background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%,url(https://img-baofun.zhhainiao.com/fs/6b60cc5d4cbe5b5081db03bc56ee7966.jpg)0 0px/100% 100%;width: 100%; height: 100%; transition: all 2s linear;z-index: 10; }


.papa::before {clip-path: polygon(0 0, 100% 100%, 100% 0);transform: translate(100%,0%) rotate(0deg) scale(1); }
.papa::after{clip-path: polygon(0 0, 100% 100%, 0 100%);transform: translate(0%,100%) rotate(0deg) scale(1); }

.papa:hover::before {transform: translate(0%,0%) rotate(0deg) scale(1); }
.papa:hover::after{transform: translate(0%,0%) rotate(0deg) scale(1); }


</style>

<style type="text/css">.items{ animation: slider1 1s linear infinite ;}
@keyframes slider1 {from {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(100%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(110%)brightness(100%);}}
</style>
<div class="papa">
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=225167836&.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
      <div class="btn">
      <span id="bf"onclick="bf();"style="width: 120px; height: 120px;z-index: 300;position: absolute;top:-60px; left:880px;"></span>
      <span id="bf"onclick="rbf();"></span>
      </div>
<div class="items" >
<div class="img_border"><img src="http://pan.yinhuabbs.cn/view.php/caef5d12b92eaa7fad771e288f5cb7c9.png" id="aplay"style="width: 100%; height: 100%;z-index: 110;" ></div></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: 100;
}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.container .btn{
    display: block;z-index: 300;
    margin: 0;
}
.container .lrc{
    width: 960px;
    height: 180px;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:-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>

<script >var lrc = `转眼我们都老了 - 王爱华
词：徐晓岚
曲：李勇军
编曲：姜凯升（姜山）
出品人：亚伦
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 = 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-6 07:55

这个有特色。{:4_199:}

红影 发表于 2022-7-6 09:15

这个斜向开门的也很好呢，而且只在一张图片上裁剪就行了，都不用去弄两张图图做封面了。亚伦老师好创意{:4_199:}
页: [1]
查看完整版本: 转眼我们都老了 - 王爱华