论坛 › 动画音画 › 我是夜里的孤独 - 大美

亚伦影音工作室 发表于 2022-6-25 11:46

我是夜里的孤独 - 大美

本帖最后由 亚伦影音工作室 于 2022-6-25 12:16 编辑 <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(http://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/8593960a5bb85b2a56d2d3e7c79525b7.jpg)0 0px/100% 100%;"/>
<img class='photo'style="background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/06/22030614344400103298.jpg)0 0px/100% 100%;" />
<img class='photo' style="background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/06/22030614351725693123.jpg)0 0px/100% 100%;" />
<img class='photo'style="background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/06/22030614325950787947.jpg)0 0px/100% 100%;" />
<img class='photo' style="background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/06/22030614340555739676.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(http://chuangshicdn.data.mvbox.cn/album/22/03/06/22030614333835236148.jpg)0 0px/100% 100%;" />
<img class='photo' style="background: url(http://chuangshicdn.data.mvbox.cn/album/21/09/17/21091709044596152074.jpg)0 0px/100% 100%;" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=222030719" controls loop style="position:absolute;top:45px;left:35px;width: 220px; height: 34px;z-index: 600;"></audio>
      <div class="btn">
         <img src="https://www.z4a.net/images/2022/06/23/123.gif" id="playpause"style="position:absolute;top:45px;left:35px;width:1px;height:1px;z-index: 600;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);"/>
      </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 {0% {
opacity: 0;clip-path:polygon(50% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 50%, 0 50%, 50% 50%, 50% 0);
-webkit-transform:translate(0%,0%)scale(1);}
1% {
opacity: 1;
clip-path:polygon(50% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 50%, 0 50%, 50% 50%, 50% 0);}
8% {
opacity: 1;background-position: 0% -100%;clip-path: polygon(75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0 50%, 25% 25%, 50% 0);
}
15% {
opacity: 1;background-position: 0% -100%;clip-path: polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0);
}
20% {
opacity: 0;background-position: 0% -100%;clip-path:polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}

}
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: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: 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(http://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 img = document.getElementById("playpause");
img.onclick = function() {
        if (aud.paused) {
                aud.play();
        } else {
                aud.pause();
        }
}
aud.addEventListener("play", function (e) {
img.src="https://www.z4a.net/images/2022/06/23/123.gif";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://chuangshicdn.data.mvbox.cn/album/22/06/06/22060617514794533687.png";
}, false);
</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-25 12:15

这个图片转换效果手机可以欣赏，音乐也是可以听到，效果棒棒的{:4_178:}

马黑黑 发表于 2022-6-25 12:24

作品极其精美，看得出作者是实实在在的高手。

代码中，HTML部分，有不当之处多处，编辑器会报错；JS，parseLyric报错，不知是不是我拿到的代码不完整。

亚伦影音工作室 发表于 2022-6-25 12:55

马黑黑 发表于 2022-6-25 12:24
作品极其精美，看得出作者是实实在在的高手。

代码中，HTML部分，有不当之处多处，编辑器会报错；JS，pa ...

是的，有些js在这里不管用。只好改改了！

走过岁月 发表于 2022-6-25 13:00

真美，确实是高手，向老师学习 {:4_190:}

走过岁月 发表于 2022-6-25 13:01

期待老师更多精美作品

马黑黑 发表于 2022-6-25 13:15

亚伦影音工作室 发表于 2022-6-25 12:55
是的，有些js在这里不管用。只好改改了！

嗯，JS和CSS、HTML，都讲究运行环境

翁奕童苑 发表于 2022-6-25 14:55

欣赏佳作。点赞！

红影 发表于 2022-6-25 15:50

变色图片轮播，还有精美的歌词同步，真漂亮的制作，给亚伦老师点赞{:4_199:}

醉美水芙蓉 发表于 2022-6-25 19:24

加林森 发表于 2022-6-25 21:41

挺好漂亮，制作真辛苦。问好老师！

亚伦影音工作室 发表于 2022-6-25 22:13

红影 发表于 2022-6-25 15:50
变色图片轮播，还有精美的歌词同步，真漂亮的制作，给亚伦老师点赞

谢谢老师的抬举支持！

红影 发表于 2022-6-26 08:48

亚伦影音工作室 发表于 2022-6-25 22:13
谢谢老师的抬举支持！

太客气了，欣赏亚伦老师好帖，期待更多精彩{:4_187:}

查看完整版本: 我是夜里的孤独 - 大美