亚伦影音工作室 发表于 2022-12-15 13:03

如果爱还在 - 天籁神音

本帖最后由 亚伦影音工作室 于 2023-9-19 07:06 编辑 <br /><br /><style>
#papa { margin: 10px -310px ; width: 1164px; height: 640px; background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0df6a88443f510c542c5bdfb61053dff.jpg)0px 0px/100% 100%;;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#papa::before { position: absolute; content: '如果爱还在 - 天籁神音'; left: 30px; top: 15px; font: bold 2.4em sans-serif; color: #ff0000; text-shadow: 2px 2px 3px #eee; z-index: 3;}
#mplayer { position: absolute; top: 500px; left:0; cursor: pointer;filter: drop-shadow(#ff0000 0px 0 15px)drop-shadow(#ff0000 0px 0 15px)drop-shadow(#ff0000 0px 0 15px); z-index: 1;}

#dt { position: absolute; left: 950px; bottom: 130px; width: 120px; height: 120px; background: url('https://pic.imgdb.cn/item/63979dcdb1fccdcd3655f9ee.png')0 0/100% 100%; cursor: pointer; z-index: 1; animation: rot linear 30s infinite; transform: rotateX(0deg) rotateY(0deg) rotate(0deg);}@keyframes rot {0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(20deg)scale(0.2);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg)scale(2);left: 30px;}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(260deg)scale(0.2);top:30px;}
}
#mpic { position: absolute;
        top: 0px;
        left: 0px;z-index: 2;
        width: 1164px;
        height: 640px;
        animation: fly 100s linear infinite;
        cursor: pointer;
        opacity: 0.5; }
@keyframes fly {from {
                background-position: 0 0;
                filter: hue-rotate(360deg)
        }

        to {
                background-position: 100px 1600px;
        }
}
#mpicc { position: absolute;
        top: 0px;
        left: 0px;z-index: 2;
        width: 1164px;
        height: 640px;
        animation: tot 80s linear infinite;
        cursor: pointer;
        opacity: 0.6; }
@keyframes tot {from {
                background-position: 0 0;
                filter: hue-rotate(360deg)
        }

        to {
                background-position: -1600px 300px;
        }
}
#photos img{float:right;width:1164px;height:640px;position:relative;LEFT:0px;top:0px;overflow:hidden;-webkit-mask-image: radial-gradient(black 35% ,transparent 70%);filter:hue-rotate(0deg)contrast(120%)brightness(100%);z-index: 1;}

#photos {position: absolute;z-index:1; width: calc(9312px * 9);
                animation-name: animate;opacity: 0.9;
                animation-duration: 30s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;}

   
    @keyframes animate {
         0%,20% {      right: -9312px;}
      25%,30% {       right: -8148px; }
      35%,40% {       right: -6984px;}
      45%,50% {      right: -5820px; }
      55%,60% {       right: -4656px; }
      65%,70% {       right: -3492px; }
      75%,80% {       right: -2328px; }
      85%,90% {       right: -1164px;}
       95%,100% {      right: 0;}
   }
#tx { position: absolute;
        top: 0px;
        left: 0px;z-index: 1;
        width: 1164px;
        height: 640px;
        animation: tx 2s linear infinite;
        cursor: pointer;
       }

@keyframes tx {from {filter: hue-rotate(0deg);
        }
to {filter:hue-rotate(360deg)contrast(100%)brightness(120%);}
}

#img_border{display:inline-block;width:150px;height:150px;position: absolute;top:420px; left:880px;z-index: 80;border:2px solid #cccccc;border-radius:50%; transition: .3s all ease;animation:rotating 10s linear infinite;}
@keyframes rotating{
0%{transform: rotate(-360deg);}
100%{transform: rotate(0deg);}
}
</style>
<div id="papa">
<divid="photos" >
<img src="https://img-baofun.zhhainiao.com/fs/08e5ee069a2bdca410f6acdc4716d154.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/80cf3f632bed46df15fe82d4f6e591b0.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/506465753f8985a68964e9e93d2a8141.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/ff4ad3821a4a29b0909290eb9f307b8c.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/7c5e11e8850af24b77faa4280baa5f3b.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/fad8d29ff61243c5ecf73730d8a1a0e5.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/b16aafc95770fb2073e15bfa453f1113.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/d379de6a6004bf2cfd47de40813702c6.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/951c3b0090c90c7a24455a17178857d5.jpg" />
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f42c220269531bedf6de3404454f8899.jpg" />
</div>

<imgid="mpicc"style="width: 100%; height: 100%;background: url(https://pic.imgdb.cn/item/6397a945b1fccdcd365f7e48.png)0 0/50% 50%" >
<imgid="mpic"style="width: 100%; height: 100%;background: url(https://pic.imgdb.cn/item/6397a945b1fccdcd365f7e48.png)0 0/50% 50%" >
<div id="dt" ></div>
<canvas id="mplayer"></canvas>
<div id="tx">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div> </div>
<div id="img_border" style="width: 150px; height: 150px;mask: radial-gradient(transparent 8px,#red 0);-webkit-mask: radial-gradient(transparent 8px,red 0);background: url(https://pic.imgdb.cn/item/6392d1d2b1fccdcd36701312.png)0 0/100% 100%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f66fe9c5324ad2c35d3d74f093174c41.jpeg)0px 0px/160% 100%;border-radius:50%;"></div>
</div>
      </div>
      <audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=200677867&.mp3" loop autoplay></audio>
<script>
   (function() { ypData = ;
let total = 120,idx = 0;
      let ctx = mplayer.getContext('2d');
      let w = mplayer.width = 1164, h = mplayer.height = 120;
      let slice = w / total, vmax = Math.max.apply(null, ypData);
      aud.loop = false;
      ctx.strokeStyle = '#ff0000';
      ctx.fillStyle = 'hsla(0, 70%, 95%, .75)';
      ctx.font = '14px sans-serif';
      ctx.shadowOffsetX = ctx.shadowOffsetY = 1;
      ctx.shadowBlur = 1;
      ctx.shadowColor = '#000';
      ctx.fillText('play', 100, 50);
      
      aud.addEventListener('ended', () => { idx = 0; aud.play(); });
      aud.addEventListener('timeupdate', () => {
                draw();
                idx ++;
                if(idx > ypData.length - 1) idx = 0;
      });

      let draw = () => {
                let ar = Array(total).fill('0').map( (v,k) => Math.random() * (ypData * h / vmax));
                ctx.clearRect(0,0,w,h);
                ctx.beginPath();
                Array.from({length: total}).forEach((v,k) => ctx.lineTo(slice*k, h - ar));
                ctx.stroke();
                ctx.fillText(toMin(aud.currentTime) + ' / ' + toMin(aud.duration), 10, 30);
      }
      let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
})();

       
</script>
<style>
.lrc{z-index: 20;
    width: 960px;
    height: 120px;
    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:500px; left:0px;
    margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
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;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;}
</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 = 60;
    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 = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("aud").ontimeupdate = setPosition;

mpic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpic.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpic.style.animationPlayState = 'paused');

mpicc.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpicc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpicc.style.animationPlayState = 'paused');

tx.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => tx.style.animationPlayState = 'running');
aud.addEventListener('pause', () => tx.style.animationPlayState = 'paused');

dt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>dt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dt.style.animationPlayState = 'paused');

photos.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => photos.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>photos.style.animationPlayState = 'paused');

img_border.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');

</script>









红影 发表于 2022-12-15 18:48

这个漂亮，黑黑的最新示波器频谱，亚伦老师这么快就做出来了呢{:4_199:}

梦缘 发表于 2022-12-16 16:13

这个频谱好漂亮，歌也好听，老师好棒！{:4_187:}
页: [1]
查看完整版本: 如果爱还在 - 天籁神音