小辣椒 发表于 2023-8-29 22:05

爱我中华


<style type="text/css">

#papa {margin: 150px 0 0 calc(50% - 780px);   width: 1409px; height: 781px; background: url('https://xlaj.cn/assets/file/zp/20230822025109.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#prog { position: absolute; bottom: 47%; width: 0px; height: px; background: linear-gradient(to right, snow var(--prg), gray 0) repeat-x 0 50% / 100% 1px;left:67%; color: snow; display: grid; place-items: center; --prg: 0%; --state: paused; z-index: 999;}
#prog::before, #prog::after { position: absolute; top: -3000px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#slider { position: absolute; font: normal 0em/0em serif;color:#ffffff; cursor: pointer; background: snow; left: var(--prg); }



#btnplay { position: absolute;bottom: 35px; font: normal 3em/0em serif;color:#000102; cursor: pointer; animation: rot 6s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }

#tu{position: absolute;top:0%; left:0%;z-index: 2;
        width: 100%;
        height: 100%;animation: round 60s linear infinite; }
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1.5)translate(10%,0%);
opacity:1}
20% {
-webkit-transform:rotate(0)scale(1.5)translate(-10%,0%);
opacity:1}
40% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,10%);
opacity:1}
60% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,-10%);
opacity:1}
80% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,0%);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:1}
}
#dt{position: absolute;top:0%; left:0%;
        width: 100%;
        height: 100%;z-index: 3; }
#mplayer {top:90%; left:45%;z-index: 6;
position: absolute;
width: 60px;
height: 60px;
overflow:hidden;
animation: spin 10s infinite linear;
}
@keyframes spin {0% { transform: rotate(360deg); }
}


#lrc {
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
      position: absolute;z-index: 6;
      left: 52%;
      transform: translate(-50%);
      top: 10%;
      font:normal 3.6em 华文新魏;
      font-weight:400;
      color: #0000;
      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: 20%;
      height: 100%;
      color: transparent;
      overflow: hidden;
      white-space: pre;
      background: var(--bg);
      
      -webkit-background-clip: text;
      animation: var(--motion) var(--tt) linear forwards;
      animation-play-state: var(--state);
}

@keyframes cover1{   0% { width: 100%;transform:rotate(0deg)scale(0)}100% { width: 100%;transform:rotate(0deg)scale(1);filter:hue-rotate(360deg)}}
@keyframes cover2 {    0% { width: 100%;transform:rotate(0deg)scale(0)}100% { width: 100%;transform:rotate(0deg)scale(1);filter:hue-rotate(360deg)}}

#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:18%; left:106%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文隶书; opacity: 1; cursor: pointer; z-index: 1111}
#mpu {--ww: 100%;--hh: 180px;--pinpu: linear-gradient(to top,darkgreen,snow);position: absolute;bottom: 0px;left:0px;width: var(--ww);height: var(--hh);display: flex;justify-content: center;align-items: flex-end;cursor: pointer;z-index: 4; animation:rotat 6s linear infinite;}
@keyframes rotat{0%{filter:hue-rotate(360deg)}100%{filter:hue-rotate(0deg)}}
.mLine {position: relative;margin: 0 3px 2px 0;width: 6px;height: 18px;background: linear-gradient(0deg, #11F60A 79%,rgba(48, 235, 10, 0.01) 80%);transition: .35s;opacity: 1;}
.mLine::before { position: absolute; content: ''; width: 100%; height:2px; background: orange; top: -6px; }
</style>
<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id='dt'><img id="testImg" src="https://xlaj.cn/bfq/20230820/GIF.gif" width="100%" height="100%"></div>
<div id='tu'><img src="https://xlaj.cn/assets/file/zp/20230822002142.jpg" alt=""width="100%" height="100%"></div>
<div id="mpu" ></div>
        <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="prog" data-cu="" data-du="" title="调节进度">
    <span id="btnplay" title="播放/暂停"><div id="btn" >❊</div></span>
         <span id="slider"></span>
    </div>
<div id="screen">
<img id="particles" src="https://xlaj.cn/assets/file/zp/20230822002142.jpg" style="visibility:hidden;"></div>
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2023/08/21/awzh.mp3" autoplay loop></audio>
<script>
let toMin = (val) => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); if(sec < 10) sec = '0' + sec; return min + ':' + sec; }
let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); prog.dataset.cu = toMin(aud.currentTime); prog.dataset.du = toMin(aud.duration); });
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `爱我中华--宋祖英
作词 : 乔羽
作曲 : 徐沛东
爱我中华 爱我中华
赛罗罗赛罗罗赛罗罗赛罗罗赛罗罗 嘿
五十六个星座 五十六支花
五十六族兄弟姐妹是一家
五十六种语言 汇成一句话
爱我中华 爱我中华 爱我中华
嗨啰咿啰嘿啰嘿 嗨啰咿啰嘿啰嘿
嗨啰咿啰嘿啰咿啰嘿啰 爱我中华
五十六个星座 五十六支花
五十六族兄弟姐妹是一家
五十六种语言 汇成一句话
爱我中华 爱我中华 爱我中华
爱我中华 健儿奋起步伐
爱我中华 建设我们的国家
爱我中华 中华雄姿英发
爱我中华 五十六族 兄弟姐妹
五十六种语言汇成一句话 爱我中华

五十六个星座 五十六支花
五十六族兄弟姐妹是一家
五十六种语言 汇成一句话
爱我中华 爱我中华 爱我中华
嗨啰咿啰嘿啰嘿 嗨啰咿啰嘿啰嘿
嗨啰咿啰嘿啰咿啰嘿啰 爱我中华
五十六个星座 五十六支花
五十六族兄弟姐妹是一家
五十六种语言 汇成一句话
爱我中华 爱我中华 爱我中华
嗨啰咿啰嘿啰嘿 嗨啰咿啰嘿啰嘿
嗨啰咿啰嘿啰咿啰嘿啰 爱我中华
五十六个星座 五十六支花
五十六族兄弟姐妹是一家
五十六种语言 汇成一句话
爱我中华 爱我中华 爱我中华
爱我中华 健儿奋起步伐
爱我中华 建设我们的国家
爱我中华 中华雄姿英发
爱我中华 五十六族 兄弟姐妹
五十六种语言汇成一句话
爱我中华 嘿

`;

/*变量 ：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); /*获得歌词数组*/
})();
tu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>tu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tu.style.animationPlayState = 'paused');

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
      };


</script>




<script>
(function() {
(function(mkPlayer) {let defaults = {ypData: new Array(500).fill(0).map((v,k) => Math.floor(Math.random() * 200) + 10)};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);mpu.style.cssText += data.player_css;aud.loop = false;let total = Math.ceil(mpu.offsetWidth / 6), ppnum = 0;let mKey = 0, mFlag = true;for(j=0; j<total; j++) {let el = document.createElement('span');el.className = 'mLine';mpu.appendChild(el);}let lines = document.querySelectorAll('.mLine');let max = Math.max.apply(null,data.ypData);let divide = max/mpu.offsetHeight, coe = 20/total/2, plus;let update = () => lines.forEach((item,key) => {plus = (key < total/2 ? key : total - key) * coe * 10;item.style.setProperty('height', Math.random() * (data.ypData - 0) / divide + plus + 'px');});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('ended', () => { mKey = 0; aud.play(); });aud.addEventListener('timeupdate', () => {ppnum ++;if(ppnum >= data.ypData.length) ppnum = 0;update();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});let mState = () => aud.paused ? lrc.style.setProperty('--state','paused') : lrc.style.setProperty('--state','running');let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;mKey += 1;mFlag = !mFlag;};};mkPlayer.HCPlayer = playCode;})(this);
      let ypData = ;
        HCPlayer({ypData: ypData,
                player_css: '--ww: 100%; --pinpu: linear-gradient(to top,blue,lightblue); align-items: flex-end;',
        });
})();

mpu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mpu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mpu.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 = '';
      }
      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("testImg"),
button = document.getElementById("btn");
    if (image&& button) {
    button.onclick = function() {
      if (this.value == '') {
            image.play();
            this.value = '.';
      } else {
         image.stop();
            this.value = '';
      }
    };
}

</script>

小辣椒 发表于 2023-8-29 22:06

妖娆美女身上点击音乐和频谱停止

liumang 发表于 2023-8-29 22:07

又一个

{:5_116:}

小辣椒 发表于 2023-8-29 22:12

liumang 发表于 2023-8-29 22:07
又一个

别人的代码套用玩一次

liumang 发表于 2023-8-29 22:13

小辣椒 发表于 2023-8-29 22:12
别人的代码套用玩一次

背景这交谊舞？

小辣椒 发表于 2023-8-29 22:14

liumang 发表于 2023-8-29 22:13
背景这交谊舞？

可能是的吧，我不会跳舞的

liumang 发表于 2023-8-29 22:16

小辣椒 发表于 2023-8-29 22:14
可能是的吧，我不会跳舞的

漂亮的舞姿
{:5_150:}

微风音乐 发表于 2023-8-31 17:36

{:5_120:}   
页: [1]
查看完整版本: 爱我中华