亚伦影音工作室 发表于 2022-6-26 21:48

镜子里是谁 - 倪尔萍

本帖最后由 亚伦影音工作室 于 2022-6-26 21:48 编辑 <br /><br /><div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-230px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(https://chuangshicdn.data.mvbox.cn/album/22/03/04/22030409205677912653.gif)0 0px/100% 100%, linear-gradient(0deg, #000080, #883300, #882222, #000000); text-align: center;">
<img class='photo'   style="background: url(https://img-baofun.zhhainiao.com/fs/9df00f9490c961d491dde8097c8cb5b5.jpg)0 0px/100% 100%;"/>
<img class='photo'style="background: url(https://img-baofun.zhhainiao.com/fs/e05062146c396510f6f23eacb8042436.jpg)0 0px/100% 100%;" />
<img class='photo' style="background:url(https://img-baofun.zhhainiao.com/fs/ab65857d9e7b1b3f0bafdfd4fa24f15d.jpg)0 0px/100% 100%;" />
<img class='photo'style="background: url(https://img-baofun.zhhainiao.com/fs/9526e3c64f0bfa614205dfe3d7a0dda9.jpg)0 0px/100% 100%;" />
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/fs/a2d932c5baa039efa12a9a13e2617b77.jpg)0 0px/100% 100%;"/>
<img class='photo'style="background: url(https://img-baofun.zhhainiao.com/fs/1e44714e0018e73d7831a10b7ffdaa54.jpg)0 0px/100% 100%;"/>
<img class='photo'style="background: url(https://img-baofun.zhhainiao.com/fs/1eacb22bc6ff181c83148bead1254418.jpg)0 0px/100% 100%;" />
<img class='photo' style="background: url(https://img-baofun.zhhainiao.com/fs/8eb5605f7bef15b40a629d6e246819d4.jpg)0 0px/100% 100%;" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=217165649" controls loop style="position:absolute;top:45px;left:35px;width: 0px; height: 0px;z-index: 0;"></audio>

      <div class="btn">
         <imid="playpause"style="position:absolute;top:-10px;left:40px;width:960px;height:120px;z-index: 600;"/>
      </div>
<div class="img_border" id="aplay"></div>
   <div class="items " style="width: 980px; height: 120px;z-index: 500;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;
filter:contrast(150%)brightness(100%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {1%{
opacity: 1;clip-path:polygon(0 0, 42% 43%, 100% 100%, 52% 53%);
-webkit-transform:translate(0%,0%)scale(1)rotateZ(0deg);}
8% {
opacity: 1;clip-path:polygon(0 0, 70% 0, 100% 100%, 30% 100%);
-webkit-transform:translate(0%,0%)scale(1);}
15% {
opacity: 1;clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
-webkit-transform:translate(0%,0%)scale(1);}

20% {
opacity: 0;clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
-webkit-transform:scale(4)}

}

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">
.container{width: 0px;height: 0px;
    margin: 0;position: absolute;top:500px; left:0px;z-index: 0;}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;}
.container .btn{
    display: block;z-index: 300;
    margin: 0;}
.container .lrc{
    width: 960px;
    height: 120px;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:-10px; left:40px;
    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: 70px;
    line-height: 70px;
font-family:悟空大字库;
    font-size: 0px;
    color: #000078;
    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:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:00px;}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;background:url(https://chuangshicdn.data.mvbox.cn/album/22/06/22/22062215012080684104.gif)0px 0/100%100%;
    z-index: 13;position: absolute;
   top:-500px;
    left: 0px;
animation: rotating 6s linear infinite;}
@keyframes rotating {0%{opacity: .3;filter:hue-rotate(0deg)contrast(160%)brightness(120%);}100%{opacity: .3;filter:hue-rotate(360deg)contrast(150%)brightness(100%);}}
</style>
<style type="text/css">.items{ 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 = ` 镜子里是谁 - 倪尔萍
词：余云飞
曲：余云飞
编曲：福洲
和声：姚斯婷
混音：小多
制作：亚伦影音工作室
创意：亚伦
影子陪我站在街尾
心事犹如马龙车水
思念又开始骗我眼泪
不顾我哭得多狼狈
影子陪我向天下跪
给我做自己的机会
戴着面具撑得我好累
连微笑都藏着眼泪
对着镜子问自己是谁
是什么让你一脸憔悴
你不在乎自己多伤悲
只在乎他今后谁来陪
对着镜子问自己是谁
是什么让你如此颓废
你再伤悲都没人安慰
往后要多笑别再流泪
影子陪我向天下跪
给我做自己的机会
戴着面具撑得我好累
连微笑都藏着眼泪
对着镜子问自己是谁
是什么让你一脸憔悴
你不在乎自己多伤悲
只在乎他今后谁来陪
对着镜子问自己是谁
是什么让你如此颓废
你再伤悲都没人安慰
往后要多笑别再流泪
对着镜子问自己是谁
是什么让你一脸憔悴
你不在乎自己多伤悲
只在乎他今后谁来陪
对着镜子问自己是谁
是什么让你如此颓废
你再伤悲都没人安慰
往后要多笑别再流泪`;
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 = 70, lrc_ul_height = 50;
    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>
         var aud = document.getElementById("MusicPlayer");
var im = document.getElementById("playpause");
im.onclick = function() {
        if (aud.paused) {
                aud.play();
        } else {
                aud.pause();
        }
}

</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="items";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>

走过岁月 发表于 2022-6-26 22:22

变幻美伦的图图，赞，音乐也好听

马黑黑 发表于 2022-6-26 22:33

极好的创意，极好的实现手段

红影 发表于 2022-6-26 22:36

好精美的创造，亚伦老师真棒{:4_187:}

小辣椒 发表于 2022-6-26 22:42

非常漂亮的制作，感谢精彩分享{:4_187:}

走过岁月 发表于 2022-6-27 13:08

好帖再来欣赏 {:4_190:}
页: [1]
查看完整版本: 镜子里是谁 - 倪尔萍