论坛 › 欢乐水吧 › 马老代码生成png五角星

亚伦影音工作室 发表于 2024-5-7 21:21

马老代码生成png五角星

本帖最后由 亚伦影音工作室 于 2024-5-7 21:29 编辑 <br /><br /><style>
#papa {margin: 140px -300px;
      width: 1164px;
      height: 640px;
      background:#000078 url(https://pic.imgdb.cn/item/663a24e80ea9cb1403c13e14.png)no-repeat center/cover;
      box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
      position: relative;overflow: hidden;
      z-index: 12345;
}

#bjdt{position: absolute;top:0px; left:0px;z-index:3;width: 1164px;height: 640px;mix-blend-mode: overlay;}
#bjdt img{position: absolute;top:0px; left:0px;z-index:3;width: 1164px;height: 640px;}
#wjx{position: absolute;top:150px; left:430px;z-index:4;width: 300px;height: 300px;}
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 50%; top: 500px;transform: translate(-50%);font:normal 2.8em 华文新魏; font-weight:400;color: #000080;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 -1px0);}
#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); } }
#bfqbj {margin: 530px 20px;
        width: 300px;
        height: 90px;background: url(https://)no-repeat center/cover;
        position: absolute;overflow: hidden;
transform:scale(0.6);
        z-index: 12345;}
#dt{position: absolute;top:5px; left:5px;width: 269px;height: 77px;z-index:3; }
#dt img{width: 100%;}

#lb{position: absolute;top:55px; left:200px;width: 35px;height: 16px;z-index:3; background: #333 }
#lb img{width: 55%;}
#mplayer {z-index: 80;
        position: absolute;
        top:0px; left:0px;
        bottom: 0px;
        width: 30px;
        height: 30px;
       
        opacity: 1;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #eeeeee;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 152px;bottom: -40px;
        border-width: 7px 8px;
        border-color: transparent transparent transparent #eeeeee;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 3px;
        height: 12px;bottom: -39px;
                left: 126px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
      color: #000;font: bold 18px/22px '微软雅黑',serif;
      bottom: 50px;
      left:105px;}
#prog {position: absolute;z-index: 91;
      width: 162px;
      height: 1px;
      cursor: pointer;
         bottom: 40px;
left:91px;
border-radius: 2px;}
#bt{ --w: 50%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:500px;top:20px;font-size: 25px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 16s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>

<div id="papa">
<div id="bjdt"><img id="bjtu" src="https://s2.krakenfiles.com/uploads/06-05-2024/ud1EM2PFwC/image.gif" ></div>
<div ><img id="wjx"src="https://pic.imgdb.cn/item/663a14e20ea9cb1403a8cb44.png" ></div>
<div id="bfqbj">
<div id="dt"><img id="tu" src="https://pic.imgdb.cn/item/66360f120ea9cb1403dc1984.gif" ></div>
<div id="lb"><img id="tulb" src="https://pic.imgdb.cn/item/662615500ea9cb14035d435e.gif" ></div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer" title="暂停/播放"></div>

</div>
<div id="bt"> </div>
<div data-lrc="亚伦影音工作室" id="lrc" title="歌词显示">亚伦影音工作室</div>
</div>
<audio id="aud" src="https://s6.krakenfiles.com/uploads/07-05-2024/3A5s40VQh3/music.m4a" loop autoplay></audio>

<script >
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? (aud.play(),image.play(),imagelb.play(),imagebj.play()): (aud.pause(),image.stop(),imagelb.stop(),imagebj.stop()));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #fff, #fff, #fff ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });
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;
      };
bt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => bt.style.animationPlayState = 'running');
aud.addEventListener('pause', () => bt.style.animationPlayState = 'paused');

</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 = '';imagelb.style.opacity = ''; imagebj.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("tu");
var imagelb= document.getElementById("tulb");
var imagebj= document.getElementById("bjtu");
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `中国v光、柳欢欢 - 当兵就是那么帅
绿色的旋风 哦 洒脱的风采
火辣辣的激情 飞扬着精彩
昂起头 挺起胸 一生是豪迈
钢枪上也有那 温柔玫瑰开
绿色的军营 哦 绿绿的情怀
羞答答的花儿 怒放着澎湃
方块被 步伐齐 热血汇成海
严肃中也有那 活泼大舞台
来来来来 我们唱起来
战友情官兵爱真心来表白
冷峻的脸庞 哦 笑颜逐开
当兵的个个 就是那么帅
来来来来 我们吼起来
吼起来 吼出咱心中的喜爱
跳动的青春 哦 紧凑的节拍
当兵的个个 就是那么帅
绿色的旋风 哦 洒脱的风采
火辣辣的激情 飞扬着精彩
昂起头 挺起胸 一生是豪迈
钢枪上也有那 温柔玫瑰开
绿色的军营 哦 绿绿的情怀
羞答答的花儿 怒放着澎湃
方块被 步伐齐 热血汇成海
严肃中也有那 活泼大舞台
来来来来 我们唱起来
战友情官兵爱真心来表白
冷峻的脸庞 哦 笑颜逐开
当兵的个个 就是那么帅
来来来来 我们吼起来
吼起来 吼出咱心中的喜爱
跳动的青春 哦 紧凑的节拍
当兵的个个 就是那么帅
来来来来 我们唱起来
战友情官兵爱真心来表白
冷峻的脸庞 哦 笑颜逐开
当兵的个个 就是那么帅
来来来来 我们吼起来
吼起来 吼出咱心中的喜爱
跳动的青春 哦 紧凑的节拍
当兵的个个 就是那么帅
当兵的个个
帅帅帅帅
就是那么帅
`;
/*变量 ：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>

小辣椒 发表于 2024-5-7 22:58

欣赏亚伦的精彩制作{:4_187:}

红影 发表于 2024-5-7 23:55

《当兵就是那么帅》，这首歌用在这里很好呢，闪闪的红星下，映衬着军人的风彩{:4_199:}

红影 发表于 2024-5-7 23:56

亚伦老师把透明图的也做了一个，学习很认真呢{:4_199:}

老谟深虑 发表于 2024-5-8 19:04

          欣赏老师的精美音画，点赞！

查看完整版本: 马老代码生成png五角星