杨帆 发表于 2025-2-8 18:24

《吉祥》 - 春雷

<style>
#papa { margin: 130px020pxcalc(50% - 721px); background: url('https://cccimg.com/view.php/2272e9fc82f92e05793852917a53ef7b.jpg') no-repeat center/cover;
background-blend-mode: lighten;
width: 1280px; height:740px; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; display: grid; place-items: center; pointer-events: none;z-index:1;
}
#btnFs {
        position: absolute;
        left: 20px;
        top: 20px;
        padding: 6px;
        background: green;
        color: white;
        border: 2px solid white;
        border-radius: 8px;
        cursor: pointer;
        pointer-events: auto;
        z-index:10;
}
#tit {
    position: absolute;
    z-index: 4;
    width:60px;
    top:18%;
    right: 4%;
    font:400 2.5em/1em 华文隶书;
    color: transparent;
    background-image: linear-gradient(180deg, #fff,#00ff00,#fff000);
    background-size: 100px 400px;border: 1px #000;
    font-weight: bold;
    writing-mode:vertical-rl;
    -webkit-background-clip:text;
    animation: wenzi 10s linear infinite alternate }
    @keyframes wenzi { 0% { background-position: 0px -2500px; } 100% { opacity: 1;background-position: 0px -1000px; }
}
#vid2 {position: absolute; width: 120%; height: 120%; left:-20px; top:-60px; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none;
}
#vid3{position: absolute; width: 120%; height: 120%; left:-20px; top:-60px; object-fit: cover; mix-blend-mode:soft-light;-webkit-mask: radial-gradient(transparent 20%, red);pointer-events: none;opacity:.9;}
#pic{width:48%; height:30%; position: absolute;top:0%; left: 0%;z-index: 1;mix-blend-mode: darken;}
#pic img{height: 100%;width: 100%;}
#player {
        position: absolute;z-index: 20;
        right:3%;
        bottom: 3%;
        width: 50px;
        height: 50px;
        border: 3px solid #cccccc;
        border-radius: 50%;
        opacity: 1;       
      cursor: pointer;
        pointer-events: auto;
}
#player:hover { filter: drop-shadow(0 0 60px Gold); }
#lrc{left: 10%;top: 70%;}#lrcc {left: 90%;transform: translate(-102%);top: 80%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg,#EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 2.5em 华文行楷;color: #222222;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 100%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg); clip-path: inset(0% 100% 0 0); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {to { clip-path: inset(0 0% 0 0);}}@keyframes cover2 {to { clip-path: inset(0 0 0 0);}}
</style>
<div id="papa">
<div id="tit">《吉祥》—— 春雷
</div>
<span id="btnFs"></span>
<div id="pic" ><img id="Img" src="https://cccimg.com/view.php/67b7fea3233182055296a387236ea196.gif" alt="" /></div>
<img id="player" alt="" src="https://xlaj.cn/upfile/202411/30/07.gif">
<video id="vid2" src="https://bpic.588ku.com/video_listen/588ku_video/24/09/26/17/02/39/video66f5232fb7a08.mp4" autoplay loop muted></video>
<video id="vid3" src="https://cccimg.com/view.php/6569eaa2372f00002bebcf2662ce86dd.mp4" autoplay loop muted></video>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<audio id="aud" src="https://cccimg.com/view.php/df643c785edd27d31bc09b1190c27a58.mp3" autoplay loop></audio>
<span id="lrcStr" style="visibility: hidden;">

吉祥 - 春雷
词：甲丁
曲：春雷
天蓝蓝 云开了
南归的大雁 飞回来了
叫醒你 叫醒他
春天的脸
像一朵太阳花 太阳花
呀拉嗦 春来了
我要为你歌唱 为你歌唱
唱出美好吉祥 美好吉祥
迎着明天的朝阳 明天的朝阳
走向灿烂辉煌 灿烂辉煌
大地上 高天下
快乐的种子已经发芽
来自你来自他
懵懂的心
是一个真童话 真童话
呀拉嗦 春来了
我要为你歌唱 为你歌唱
唱出美好吉祥 美好吉祥
迎着明天的朝阳 明天的朝阳
走向灿烂辉煌 灿烂辉煌
我要为你歌唱 为你歌唱
唱出美好吉祥 美好吉祥
迎着明天的朝阳 明天的朝阳
走向灿烂辉煌 灿烂辉煌
我要为你歌唱 为你歌唱
唱出美好吉祥 美好吉祥
迎着明天的朝阳 明天的朝阳
走向灿烂辉煌 灿烂辉煌
呀拉嗦 辉煌

</span>
</div>
<script>
var mState = () => {
        papa.style.setProperty('--state', ['running','paused'][+aud.paused]);aud.paused ?(vid2.pause(),vid3.pause(), image0.stop()):(vid2.play(), vid3.play(), image0.play());
        player.title = ['暂停', '播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
player.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
(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"),mdiv.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mdiv.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 type="module">
        import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        qp.fs('papa','btnFs');
</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;
            // 透明度还原
            image0.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 image0= document.getElementById("Img");
</script>


起个网名好难 发表于 2025-2-8 19:24

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

红影 发表于 2025-2-8 20:21

很漂亮的制作，好像用了很多视频呢。
欣赏杨帆好帖{:4_199:}

红影 发表于 2025-2-8 20:27

原来还一个视频是歌曲视频，有趣。歌曲很好听。感谢杨帆带来的好帖{:4_187:}

杨帆 发表于 2025-2-8 20:57

起个网名好难 发表于 2025-2-8 19:24


谢谢难难老师鼓励，祝新春快乐{:4_176:}

杨帆 发表于 2025-2-8 21:00

红影 发表于 2025-2-8 20:21
很漂亮的制作，好像用了很多视频呢。
欣赏杨帆好帖

谢谢影子支持与鼓励，祝新春快乐{:4_204:}

梦油 发表于 2025-2-8 21:07

欣赏佳作，问候杨帆。

杨帆 发表于 2025-2-8 21:45

梦油 发表于 2025-2-8 21:07
欣赏佳作，问候杨帆。

问候梦油超版，祝新春快乐{:4_176:}

红影 发表于 2025-2-8 22:12

杨帆 发表于 2025-2-8 21:00
谢谢影子支持与鼓励，祝新春快乐

谢谢杨帆，歌曲很好听{:4_187:}

小辣椒 发表于 2025-2-8 22:15

问好杨帆，欣赏精彩的制作{:4_187:}

杨帆 发表于 2025-2-8 23:20

小辣椒 发表于 2025-2-8 22:15
问好杨帆，欣赏精彩的制作

谢谢小辣椒支持与鼓励，祝新春快乐{:4_204:}

梦江南 发表于 2025-2-9 08:18

问好老师，欣赏精彩的音画。新年快乐！

梦油 发表于 2025-2-9 11:16

杨帆 发表于 2025-2-8 21:45
问候梦油超版，祝新春快乐

杨帆朋友不客气。

杨帆 发表于 2025-2-9 23:05

梦江南 发表于 2025-2-9 08:18
问好老师，欣赏精彩的音画。新年快乐！

问好梦江南友友，新春快乐{:4_204:}

深秋红枫 发表于 2025-2-9 23:25

<script type="text/javascript">
var lxtxt =[">lmth/<",
'>vid/<>naps/<！个一赞，习学、赏欣>"体宋仿 me0.3 dlob:tnof;%081:thgieh-enil;)fig.ItYAP4/31/90/1202/moc.x1xa.3z//:sptth(lru:egami-dnuorgkcab;)0,0,552(bgr xp1 :ekorts-txet-tikbew-;tnerapsnart:roloc-llif-txet-tikbew-;txet:pilc-dnuorgkcab-tikbew-"=elyts naps<',
'>";evitaler : noitisop ;%081:thgieh-enil ;retnec:ngila-txet ;xp05: pot-gniddap ;otua xp0 : nigram ;xp053:thgieh;%001:htdiw"=elyts vid<'];

var linelen = lxtxt.length;
var txtStr = '';
for(n = linelen - 1; n >=0; n--)      {
      var linetxt = lxtxt;
      for(j = linetxt.length - 1; j>=0;j--)      {
                txtStr += linetxt.charAt(j);
      }
}
document.write(txtStr);
</script>

杨帆 发表于 2025-2-10 00:09

深秋红枫 发表于 2025-2-9 23:25
var lxtxt =[">lmth/

问好深秋红枫友友，元宵节快乐{:4_176:}
页: [1]
查看完整版本: 《吉祥》 - 春雷