张红 发表于 2023-1-31 21:14

恋曲1990 - 罗大佑'

<style>
#outer{
      left: 0px;top:30px;
      width: 800px;
      height:450px;
       box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow:
hidden;transform:rotate(0deg);background: url("http://pan.yinhuabbs.cn/view.php/1ea6ade60c6f8d58128a5d65dfbe9a86.jpg")0 0/100%100%; text-align: center;
      position: relative;
       display: grid;
       --opt: .85;
}
#outer::before { position: absolute; content: ''; background: url('http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif') repeat; width:100%; height: 100%; mix-blend-mode: screen; opacity: var(--opt); animation: opa linear 20s infinite alternate; }
#lrcwk {width: 800px;
      transform: translate(0px, 380px);
      font: bold 2.8em sans-serif;
      color: #000000;
      -webkit-text-stroke:1px #ff00ff;
      font-family:迷你简中倩;
      cursor: pointer;
      position: absolute;
      z-index: 5;
}
.wzsd1 { animation: wzsd 0.56s linear infinite ; }
@keyframes wzsd {
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>
<div id="outer">
<div id="lrcwk">
<div class="wzsd1" style="position:absolute; top:00px; right:80px; width:620px;height:80px; text-align:center ">
<div id="geci" style="padding: 0;margin: 4px 0px">加载稍后。。。。</div>
<audio id="aud" src="http://storage.live.com/items/1965B2B1656C2AF6!16241?" autoplay="autoplay" loop="loop"></audio>

<script>
      lrcbox = document.querySelector('#lrcbox'),
      geci = document.querySelector('#geci'),
       aud = document.querySelector('#aud'),
lrc = [
        ['0.00','恋曲1990- 罗大佑'],
        ['6.27','词：罗大佑'],
        ['12.27','曲：罗大佑'],
        ['19.27','乌溜溜的黑眼珠和你的笑脸'],
        ['27.63','怎么也难忘记你容颜的转变'],
        ['35.69','轻飘飘的旧时光就这么溜走'],
        ['44.00','转头回去看看时已匆匆数年'],
        ['52.36','苍茫茫的天涯路是你的飘泊'],
        ['60.62','寻寻觅觅长相守是我的脚步'],
        ['68.93','黑漆漆的孤枕边是你的温柔'],
        ['77.24','醒来时的清晨里是我的哀愁'],
        ['85.55','或许明日太阳西下倦鸟已归时'],
        ['93.86','你将已经踏上旧时的归途'],
        ['102.13','人生难得再次寻觅相知的伴侣'],
        ['110.39','生命终究难舍蓝蓝的白云天'],
        ['118.80','轰隆隆的雷雨声在我的窗前'],
        ['127.06','怎么也难忘记你离去的转变'],
        ['135.37','孤单单的身影后寂寥的心情'],
        ['143.93','永远无怨的是我的双眼'],
        ['144.47','永远无怨的是我的双眼'],
        ['152.63','永远无怨的是我的双眼']
];
lrcwk.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
      for(j=0; j<lrc.length; j++){
                if(aud.currentTime >= lrc){
                        geci.innerHTML = lrc;
                }
      }
})
</script>

容轩听雨 发表于 2023-1-31 21:22

画面素雅灵动，LRC编辑合拍，经典老歌寄情，赞一个，问好老师，春节快乐

蓝魔 发表于 2023-1-31 21:35

欣赏一下，谢谢。

巫荣云师 发表于 2023-2-1 07:44

欣赏学习老师佳作《恋曲1990 - 罗大佑'》。问好点赞！:handshake{:1_293:}
页: [1]
查看完整版本: 恋曲1990 - 罗大佑'