张红 发表于 2023-5-29 17:29

毛宁-《涛声依旧.3D环绕》


<div style="position: relative;width: 873px;height: 480px;MARGIN-LEFT:0px;margin-top:33px;box-shadow:0px 0px 0px 2px #ff00ff, 0px 0px 0px 15px #880000;overflow:hidden;border-radius:0%;bgcolor:#B22222; ">
<video id="sp"src="http://storage.live.com/items/1965B2B1656C2AF6!16358?" muted="muted" autoplay="autoplay" loop="loop"width="873"></video></div>
<style>
#lrcbox {width: 873px;
      transform: translate(-90px, -60px);
      font: bold 2.5em sans-serif;
      color: #00000;
       -webkit-text-stroke:1px #ff00ff;
      font-family:迷你简中倩;
      cursor: pointer;
      position: absolute;
      z-index: 5;
}
.wzsd1 { animation: wzsd 0.86s 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="lrcbox">
<div class="wzsd1" style="position:absolute; top:0px; right:80px; width:620px;height:80px; text-align:center ">
<div id="geci" ></div></div></div></div>
<audio id="aud" src="http://fs.ringop.kugou.com/KGTX/CLTX001/02275b71ac0ef5874cf321b081dd11fb.mp3" autoplay="autoplay" loop="loop"></audio>


<script>
      lrcbox = document.querySelector('#lrcbox'),
      geci = document.querySelector('#geci'),
       aud = document.querySelector('#aud'),
    sp = document.querySelector('#sp'),
lrc =[
['0.00','毛宁-涛声依旧.3D环绕'],
        ['26.69','带走一盏渔火'],
        ['30.06','让它温暖我的双眼'],
        ['34.50','留下一段真情'],
        ['37.71','让它停泊在枫桥边'],
        ['42.57','无助的我'],
        ['45.51','已经疏远了那份情感'],
        ['49.35','许多年以后却发觉'],
        ['52.42','又回到你面前'],
        ['65.49','留连的钟声'],
        ['68.78','还在敲打我的无眠'],
        ['73.24','尘封的日子'],
        ['76.45','始终不会是一片云烟'],
        ['81.42','久违的你'],
        ['84.32','一定保存着那张笑脸'],
        ['88.18','许多年以后能不能'],
        ['91.03','接受彼此的改变'],
        ['100.55','月落乌啼 总是千年的风霜'],
        ['108.60','涛声依旧 不见当初的夜晚'],
        ['115.78','今天的你我'],
        ['119.15','怎样重复昨天的故事'],
        ['122.96','这一张旧船票'],
        ['126.95','能否登上你的客船'],
        ['146.78','留连的钟声'],
        ['150.16','还在敲打我的无眠'],
        ['154.64','尘封的日子'],
        ['157.75','始终不会是一片云烟'],
        ['162.75','久违的你'],
        ['165.64','一定保存着那张笑脸'],
        ['169.61','许多年以后能不能'],
        ['172.36','接受彼此的改变'],
        ['182.21','月落乌啼 总是千年的风霜'],
        ['189.70','涛声依旧 不见当初的夜晚'],
        ['197.10','今天的你我'],
        ['200.51','怎样重复昨天的故事'],
        ['204.46','这一张旧船票'],
        ['208.33','能否登上你的客船'],
        ['213.03','月落乌啼 总是千年的风霜'],
        ['220.67','涛声依旧 不见当初的夜晚'],
        ['228.08','今天的你我'],
        ['231.49','怎样重复昨天的故事'],
        ['235.39','这一张旧船票'],
        ['239.35','能否登上你的客船'],
        ['243.25','能否登上你的客船']
];
lrcbox.onclick =function() {
aud.paused ? aud.play() : aud.pause()
sp.paused ? sp.play() : sp.pause()
};


aud.addEventListener('timeupdate', () => {
      for(j=0; j<lrc.length; j++){
                if(aud.currentTime >= lrc){
                        geci.innerHTML = lrc;
                }
      }
})
</script>

巫荣云师 发表于 2023-5-29 20:13

欣赏收藏老师的佳作《涛声依旧》。:handshake{:1_293:}问好点赞!

蓝魔 发表于 2023-5-29 22:20

欣赏一下,谢谢。

天涔 发表于 2023-5-30 14:40

欣赏佳作!点赞!

zzkhzfw 发表于 2023-6-1 23:10

《涛声依旧》当年正流行时,我刚过四十

容轩听雨 发表于 2023-6-2 11:54

经典歌曲寄情,嵌入的视频场面活泼,问好朋友!

午老虎 发表于 2023-6-2 12:50

欣赏了谢谢

么念 发表于 2023-6-5 16:25

谢谢分享!   欣赏一下,谢谢!
页: [1]
查看完整版本: 毛宁-《涛声依旧.3D环绕》