梦江南 发表于 2025-6-4 14:58

我爱祖国的蓝天--韩红


<style>
#papa { margin: 150px 0 30px calc(50% - 881px); background:#200 url('https://cccimg.com/view.php/b8cc2c5144290ea68dd8595510bce4e5.png')no-repeat center/cover;width: 1600px; height: 900px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;}

#play { position: absolute;width: 150px;
        height: 150px;
        top: 10%; cursor: pointer; left: 82%;z-index: 20;animation: rot 8s linear infinite ; transition: .6s;}
@keyframes rot {
        from { transform: rotate(0deg); filter: hue-rotate(0deg) drop-shadow(0 0 10px #000); }
        to { transform: rotate(360deg); filter: hue-rotate(360deg) drop-shadow(0 0 10px #000); }
}
#vid {z-index: 2;
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-mask-image: radial-gradient(black 45% ,transparent 90%);
}
#vido {z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        }
#lrc{left: 5%;top: 85%;}#lrcc {right:5%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;font:normal 2.5em 华文隶书;color: #000080;white-space: pre;-webkit-background-clip: text;z-index: 20;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #880000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
#fullscreen { position: absolute; top: -330px; right:30px;font: normal 2em/0em 楷体;color:#ccc; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<div id="play"><img id="Img" src="https://cccimg.com/view.php/8d2db8c5165ea10c08274010df4cd9fb.png" alt="" /></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<span id="fullscreen">全屏欣赏</span>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=238685.mp3" autoplay loop></audio>
<video id="vid" src="https://img1.oldkids.cn/upload/2025/06/04/blog_260798238_20250604144526172.mp4" autoplay loop muted></video>
<video id="vido" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0febdc4d9660edc6b4576c1c1dbc620c_preview.mp" autoplay loop muted></video>
</div>
<script>
play.onclick = () => aud.paused ?( aud.play(),vid.play(),vido.play(),image.play()):(aud.pause(),vid.pause(),vido.pause(),image.stop());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '全屏欣赏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏 ', document.exitFullscreen());
                fs = !fs;
      };
</script>
<span id="lrcStr" style="visibility: hidden;">歌手：韩红
我爱祖国的蓝天，

晴空万里阳光灿烂,

白云为我铺大道，

东风送我飞向前。

金色的朝霞在我身边飞舞，

脚下是一片锦绣河山。

啊……水兵爱大海，骑兵爱草原，

要问飞行员爱什么

我爱祖国的蓝天。

Music......

我爱祖国的蓝天，

云海茫茫一望无边，

春雷为我擂战鼓，

红日照我把敌歼。

美丽的长虹搭起彩门，

迎接着战鹰胜利凯旋。

啊……水兵爱大海，骑兵爱草原，

要问飞行员爱什么

我爱祖国的蓝天。



</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
      let tmpAr = [];
      for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
      }
      let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
      let lrcAr = [];
      let arr="";
      let calcRule = ;
      for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                              for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                              }
                        }
                }
      }
      lrcAr.sort((a,b)=> a - b);
      return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
      lrca=lrcAr;
      lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
      let Y=String(mKey/2).indexOf(".");
      if (Y == -1)
    {
      0==mKey&&(lrc.innerHTML=lrca);
      lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
      lrcc.dataset.lrc = "";
      lrc.style.setProperty('--motion', 'cover1');
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
      }
    else
    {
      lrc.innerHTML = lrcb;
      lrcc.dataset.lrc = lrca;
      lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
      lrcc.style.setProperty('--tt', time + 's');
      lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
      }
      mKey += 1;
};
/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
      }
      if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let time = lrcAr - (aud.currentTime - lrcAr);
      showLrc(time);
};

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),play.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),play.style.animationPlayState="running");
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});
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;
      };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}

var image= document.getElementById("Img");
</script>

红影 发表于 2025-6-4 18:02

飒爽英姿的空军女飞行员，人物俊美，动画也好看。
欣赏江南好帖{:4_199:}

红影 发表于 2025-6-4 18:03

帖子里的人物好美啊{:4_187:}

小九 发表于 2025-6-4 18:53

欣赏精美的制作！ 非常正能量的一首歌！{:4_187:}

杨帆 发表于 2025-6-4 19:07

漂亮！谢谢江南精彩分享{:4_187:}

梦油 发表于 2025-6-4 20:36

这首歌曲很受欢迎。{:4_199:}

梦江南 发表于 2025-6-5 08:54

红影 发表于 2025-6-4 18:02
飒爽英姿的空军女飞行员，人物俊美，动画也好看。
欣赏江南好帖

问好影子，谢谢沙发欣赏支持鼓励！{:4_187:}

梦江南 发表于 2025-6-5 08:55

红影 发表于 2025-6-4 18:03
帖子里的人物好美啊

帖子里的人物都 是AI绘出来的。{:4_173:}

梦江南 发表于 2025-6-5 08:56

小九 发表于 2025-6-4 18:53
欣赏精美的制作！ 非常正能量的一首歌！

问好小九老师，谢谢欣赏支持。{:4_187:}

梦江南 发表于 2025-6-5 08:57

杨帆 发表于 2025-6-4 19:07
漂亮！谢谢江南精彩分享

问好杨帆老师，谢谢欣赏支持。{:4_187:}

梦江南 发表于 2025-6-5 08:57

梦油 发表于 2025-6-4 20:36
这首歌曲很受欢迎。

问好梦油老师，谢谢欣赏支持。{:4_187:}

梦油 发表于 2025-6-5 11:12

梦江南 发表于 2025-6-5 08:57
问好梦油老师，谢谢欣赏支持。

彼此、彼此。你对俺的支持更大。谢谢你！

梦江南 发表于 2025-6-5 11:19

梦油 发表于 2025-6-5 11:12
彼此、彼此。你对俺的支持更大。谢谢你！

在论坛互动是最好的支持，应该的。

梦油 发表于 2025-6-5 16:23

梦江南 发表于 2025-6-5 11:19
在论坛互动是最好的支持，应该的。

有来无往非礼也。

梦江南 发表于 2025-6-5 17:28

梦油 发表于 2025-6-5 16:23
有来无往非礼也。

说得好！下次就不要客气了。

梦油 发表于 2025-6-5 20:29

梦江南 发表于 2025-6-5 17:28
说得好！下次就不要客气了。

好的，我们不客气。

梦江南 发表于 2025-6-6 09:58

梦油 发表于 2025-6-5 20:29
好的，我们不客气。

礼尚往来还是需要的。

梦油 发表于 2025-6-6 14:31

梦江南 发表于 2025-6-6 09:58
礼尚往来还是需要的。

你是一位很有修养的人。{:5_116:}

梦江南 发表于 2025-6-6 14:52

梦油 发表于 2025-6-6 14:31
你是一位很有修养的人。

这是做人的基本道理。
从某种角度上来说，也是活跃论坛的一种交流形式，没有互动、交流，这个论坛就没有生气了。

梦油 发表于 2025-6-6 16:40

梦江南 发表于 2025-6-6 14:52
这是做人的基本道理。
从某种角度上来说，也是活跃论坛的一种交流形式，没有互动、交流，这个论坛就没有 ...

是这样，这也是一种礼貌。
页: [1] 2
查看完整版本: 我爱祖国的蓝天--韩红