ysj147 发表于 2023-10-1 11:43

祝福祖国繁荣昌盛！生日快乐！


<style>
#papa        {
        width: 1200px;height: 710px;position:absolute; --state:paused;
        box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;
        overflow:hidden;border-radius:1%;display:grid; place-items:center;
        margin-top:100px;margin-LEFT:-120px;
}

.vid { position: absolute; width: 1500px; height: 710px; object-fit: cover; opacity: .3; }
.vid2 { position: absolute; width: 600px; height: 400px; object-fit: cover; opacity: .6; }
.vid3 { position: absolute; width: 600px; height: 400px; object-fit: cover; opacity: .5; }

#baiBox {
      width: 500px;
        height: 50px;
      text-align: center;
      font-family:微软简中圆;
      font-size: 2.0rem;
      font-weight: bold;
      color: #f46ff6;
      transform-origin: top;
      animation: yao 1.0s linear infinite alternate;
        position:absolute;left:-50px;top:30px;
}

@keyframes yao {
      from{transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}

.tit { position: relative;width: 500px;height: 30px;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }

css-doodle { position: absolute; }


#canv {
      filter:hue-rotate(0deg)contrast(140%)brightness(80%);
        position: absolute;
        display: block;
        height: 100%;
        position: relative;
        cursor: pointer;
        z-index: 4;opacity: 0;
}

#vid { display: none; }

#lrc { --motion: cover2; --tt: 1.5s; position: absolute; left: 50%;top:88%; transform: translate(-50%, 10px);font:normal 3.2em 华文行楷; color:#0000; z-index: 21; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background: linear-gradient(0deg, #1E9600 0%,#FFF200 50%,#FF0000 100%);background-size: 10vmin 125%;background-position: center center; filter: drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }

@keyframes cover1{0% {opacity: 0;transform: translatex(-600px);}
20% {opacity: 1;transform: scale(1,1);}
21% {opacity: 1;transform: scale(1,1);}
40% {opacity: 1;transform: scale(1,0);filter:brightness(800%)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);}
70% {opacity: 1;transform: scale(1,1);filter:brightness(800%)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);}
80% {opacity: 1;transform: scale(1,1);filter:brightness(800%)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);}
100% {opacity: 0.8;transform: translatex(200px)scale(.7);}
}
@keyframes cover2 {0% {opacity: 0;transform: translatex(0px);}
30% {opacity: 1;transform: scale(1,1);}
40% {opacity: 1;transform: scale(0,1);filter:brightness(800%)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);}
60% {opacity: 1;transform: scale(1,1);filter:brightness(800%)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);}
100% {opacity: 0.8;transform: translatex(200px)scale(.7);}
        }
</style>

<div id="papa">



<video frameborder="0" class="vid"   src="https://img.tukuppt.com/video_show/13928806/00/40/95/600a88d1145fd.mp4" autoplay muted loop="" controls="" style="MARGIN-TOP:0px;MARGIN-LEFT:0px;background:#000 ;width:1400px; height: 710px;-webkit-mask-image: radial-gradient(black 100%, transparent 100%);position:absolute;left:0px;top:0px;"></video>


<video frameborder="0" class="vid3"   src="http://www.kumeiwp.com/sub/filestores/2023/05/22/0f6ae58a097aa6458b623b5256eaeeb0.mp4" autoplay muted loop="" controls="" style="MARGIN-TOP:0px;MARGIN-LEFT:0px;background:#000 ;width:1200px; height: 710px;-webkit-mask-image: radial-gradient(black 100%, transparent 100%);position:absolute;left:0px;top:0px;"></video>

<metaname="referrer" content="never">
<video frameborder="0" class="vid2"src="https://video-js.51miz.com/preview/video/00/00/17/87/V-178763-69763A5B.mp4
" autoplay muted loop="" controls="" style="MARGIN-TOP:0px;MARGIN-LEFT:0px;background:#000 ;width:1200px; height: 710px;-webkit-mask-image: radial-gradient(black 100%, transparent 100%);position:absolute;left:0px;top:0px;"></video>



<div id="baiBox">
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:30px;">《今天是你的生日》   </span>
<span style="color:#3d46f7;"><span style="font-size:18px;">   - 梦之旅</span>
</div></div>

<div style="position:absolute;bottom:10px;right:20px;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:24px;"> 亦是金在线音乐 </span></span></span></p></div>

<div style="position:absolute;bottom:60px;left:20px;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)">
<p><span style="color:#3d46f7;"><span style="font-family:微软雅黑;"><span style="font-size:20px;"></span></span></span></p></div>



<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>


<css-doodle grid="5x1" id="mplayer">
      :doodle {
                @grid: 2 / 1200px 710px;
                bottom: 0px;
                left: 0px;
                z-index: 999;
                position:absolute;
      }
      clip-path: @shape(
                points: 200;
                r: cos(@pn(3,6,2,7,8)t);
      );
      background: radial-gradient(purple, orange, lightgreen);
      @nth(1,2,3,4,5,6) {
                @size: 100px;
                @place: 60px 60px;
                cursor: pointer; animation: rot 4s infinite linear var(--state);
      }
@nth(1) { @size: 55px; @place: 55% 34%; }
      @nth(2) { @size: 70px; @place: 75% 34%; }
      @nth(3) { @size: 60px; @place: 20% 26%; }
@nth(4) { @size: 80px; @place: 35% 55%; }
@nth(5) { @size: 155px; @place: 32% 45%; }
      @keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>

<css-doodle grid="8x1" click-to-update="">
:doodle { @size: 550px 1200px; top: 30px; left: 400px;}
      @size: 65px;
      @shape: circle;
      background: linear-gradient(to bottom,#fbc041 0%,#e9dfd1 100%);
      font: normal 30px / 30px sans-serif;
:after {
      content: @pn([祝福祖国生日快乐]);
      font-family: '华文行楷',sans-serif;
      font-size: 3.0rem;
      color: #fd2e8f;   
      text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
      font-weight: 900;
      letter-spacing: -2px;
}
      animation: fall 1s calc((@i - 1) * 1s) linear forwards var(--state);

@keyframes fall {
      from { transform: translateY(0); }/*变换：平移Y（0）；*/
          to { transform: translateY(510px); }
}
</css-doodle>


<css-doodle grid="16" id="fFloat">
        :doodle {
                @size: 1150px 680px;
        }
        position: absolute;
        left: @r(255)%;
        top: -10%;
        :after {
                position: absolute;
                content: '@p( ♬, ♪, ♩, ♫,祖国, ✲,繁荣, ❤, 强盛, ☺,生日, ★, 祝福,快乐, ❄)';
                color:#fb52f9;
                font-size: @r(15, 30)px;
        }
        animation: fall 40s @r(-6, 36)s infinite var(--state);
        @keyframes fall {
                from { transform: rotate(0deg) translate(0px); }
                to { transform: rotate(@r(-250,160)deg) translate(-1500px); }
        }
</css-doodle>

</div>
</div>
<canvas id="canv"></canvas>
       
<audio id="aud" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/mp3/jtsndsr.mp3" autoplay loop></audio>

</div>

<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
        ctx.drawImage(vid, 0, 0, ww, hh);
        if(!vid.paused) {
                requestAnimationFrame(loop);
                return;
        }
}
let mState = () => aud.paused ? ( mplayer.style.setProperty('--state', 'paused'), vid.pause()) : ( mplayer.style.setProperty('--state', 'running'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

<script>

(function() {

      let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
      
      let script = document.createElement('script');
      script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
      document.head.appendChild(script);
      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;};
      let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('timeupdate', () => {
                mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
                mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
                mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
      });
      mplayer.onclick = (e) => {
                if(e.offsetX > 130 && e.offsetX < 170 && e.offsetY < 46) aud.paused ? aud.play() : aud.pause();
                if(e.offsetY > 46) aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
      }
})();


</script>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
《今天是你的生日》
词：韩静廷 | 曲：谷建芬
演唱 ：梦之旅合唱组合
歌词编辑：亦是金

今天是你的生日 我的中国
清晨我放飞一群白鸽
为你衔来一枚橄榄叶
鸽子在崇山峻岭飞过

我们祝福你的生日 我的中国
愿你永远没有忧患永远宁静
这是儿女们心中期望的歌
为你带回远方儿女的思念
鸽子在茫茫海天飞过
愿你月儿常圆儿女永远欢乐
这是儿女在远方爱的诉说
为你衔来一棵金色的麦穗
鸽子在风风雨雨中飞过
嘟 嘟嗒嘟嗒
嘟嗒 嘟嗒
Happy brithday to you
嘟嗒嘟 嘟嗒嘟
祝你生日快乐
愿你逆风起飞雨中获得收获
-- 谢谢欣赏 --
`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, 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 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) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 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 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;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.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;
                }
        }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();


</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;
            }
      }
    };
}


(function() {
let vid = document.querySelector('.vid');

    let script = document.createElement('script');
    script.src = 'https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js';
    document.head.appendChild(script);
    let mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'), vid.pause()) : (papa.style.setProperty('--state', 'running'), vid.play());   
    aud.addEventListener('play', mState, false);
    aud.addEventListener('pause', mState, false);
    mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();


(function() {
let vid2 = document.querySelector('.vid2');

    let mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'), vid2.pause()) : (papa.style.setProperty('--state', 'running'), vid2.play());   
    aud.addEventListener('play', mState, false);
    aud.addEventListener('pause', mState, false);
    mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();

(function() {
let vid3 = document.querySelector('.vid3');

    let mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'), vid3.pause()) : (papa.style.setProperty('--state', 'running'), vid3.play());   
    aud.addEventListener('play', mState, false);
    aud.addEventListener('pause', mState, false);
    mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();

</script>


<DIV style="HEIGHT: 100px"></DIV>

巫荣云师 发表于 2023-10-1 20:32

亦是金老师的[原创单曲] 《祝福祖国繁荣昌盛！生日快乐！》非常好听。
欣赏收藏学习老师的代码佳作。谢谢您，点赞问好！

蓝魔 发表于 2023-10-1 21:20

欣赏一下，谢谢。

ysj147 发表于 2023-10-3 16:24

巫荣云师 发表于 2023-10-1 20:32
亦是金老师的[原创单曲] 《祝福祖国繁荣昌盛！生日快乐！》非常好听。
欣赏收藏学习老师的代码佳作。谢谢 ...

问好！谢谢欣赏！:handshake

ysj147 发表于 2023-10-3 16:24

蓝魔 发表于 2023-10-1 21:20
欣赏一下，谢谢。

问好！谢谢欣赏！:handshake
页: [1]
查看完整版本: 祝福祖国繁荣昌盛！生日快乐！