亚伦影音工作室 发表于 2023-12-15 22:26

奇妙的开头一句

本帖最后由 亚伦影音工作室 于 2023-12-26 07:58 编辑 <br /><br /><style>
#mydiv {
    margin: 0 0 0 calc(50% - 650px);
    width: 1164px;
    height: 620px;
   background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/741f1448313719dba33d990e934f0b44.jpg)no-repeat center/cover;
    overflow: hidden;
    position: relative;
    --state: paused;
}
#dh{ width: 100%; height: 620px; position: absolute;
z-index: 1;background: #000000 url(https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg)no-repeat center/cover;
top:0px; left:0px;
animation: rod 20s linear infinite;}
@keyframes rod{0% {opacity: 0;}
50% {opacity: 1;}100% {opacity: 0;}
}

.leaf {z-index: 1;
    position: absolute;
    width: 40px;
    height: 40px;
    top: -50px;opacity:.8;   left: 52%;
    font: normal 3em/0em serif;color: #f5680a;
    animation: drop 10s var(--delay) infinite linear var(--state);
    --delay: 0s;
}
.leaf:nth-of-type(2) { --delay: -2s;left: 22%;color: #00ff00;transform:rotate(0deg)scale(3.5)translate(40%,0%); }
.leaf:nth-of-type(3) { --delay: -4s;left: 72%; }
.leaf:nth-of-type(4) { --delay: -6s; }
.leaf:nth-of-type(5) { --delay: -3s;left: 70%; transform:rotate(150deg)scale(2)translate(-50%,0%);}
@keyframes pinpuMotion { from { height: 0px; } to { height: var(--height);} }
@keyframes drop { to { transform: rotate(-20deg) translateY(600px); } }

#player { width: 50px; height: 50px; cursor: pointer; background: url('https://pic.imgdb.cn/item/65165dfcc458853aeff44557.png') no-repeat center/cover;animation: rotating 12s linear infinite var(--state); position: relative;z-index: 81;top: 500px;    left: 2%;}
@keyframes rotating { to { transform: rotate(360deg); } }
#lrc {z-index: 82;
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
      position: absolute;
      left: 52%;
      transform: translate(-50%);
      top: 520px;
      font:normal 3em 微软雅黑;
      font-weight:600;
      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: 20%;
      height: 100%;
      color: transparent;
   
      background: var(--bg);
      
      -webkit-background-clip: text;
      animation: var(--motion) var(--tt) linear forwards;
      animation-play-state: var(--state);
}
@keyframes cover1{0% { width: 0%;}100% { width: 100%;}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}
</style>
<style>
pinpu-wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;z-index: 80;
    transform: translate(-50%);
   
}
pin-pu {
    position: absolute;
    bottom: 0; background: #00ff00;
    animation: pinpuMotion var(--du) var(--delay) infinite alternate linear var(--state);
}


</style>
<div id="mydiv">
<div id="dh" style="animation-play-state: running;"></div>
   <span class="leaf">&#127809;</span>
    <span class="leaf">&#127809;</span>
<span class="leaf">&#127810;</span>
<span class="leaf">&#127809;</span>
<span class="leaf">&#127809;</span>
<pinpu-wrapper></pinpu-wrapper>
    <div id="player" ></div>
<div data-lrc="" id="lrc" title="歌词显示"></div>

</div>
<audio id="aud" src="https://i.mp3.wf/view.php/860477b45d4808a21ef8d7bfdc739bef.mp3" autoplay loop></audio>

<script>
!function() {
    let pinpuNum = 350, pinpuWidth = 2, pinpuHeight = 150;
    let ppwrap = document.querySelector('pinpu-wrapper');
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let msort = (ar) => {
      let newAr = [];
      ar.forEach((v,k) => k % 2 === 0 ? newAr.unshift(v) : newAr.push(v));
      return newAr;}
!function() {
      let ar = Array.from(Array(pinpuNum), (v,k) => pinpuNum - k -1);
      Array.from({length: pinpuNum}).forEach((item,key) => {
            item = document.createElement('pin-pu');
            item.style.cssText += `
                width: ${pinpuWidth}px;
                left: ${(pinpuWidth + 2) * key}px;
                background: #${Math.random().toString(16).substr(0)};
                --height: ${18 + (pinpuHeight - 18) / pinpuNum * msort(ar)}px;
                --du: ${Math.random() * .5 + .5}s;
                --delay: -${Math.random()}s;
            `;
            ppwrap.appendChild(item);
      });
      ppwrap.style.height = `${pinpuHeight}px`;
      ppwrap.style.width = `${(pinpuWidth + 2) * pinpuNum}px`;
    }();
aud.addEventListener('play', mState, false);
    aud.addEventListener('pause', mState, false);
    player.onclick = () => aud.paused ? aud.play() : aud.pause();
}();


</script>
<script>
(function() {
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'),player.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),player.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); /*获得歌词数组*/
})();


dh.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>dh.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dh.style.animationPlayState = 'paused');
</script>

红影 发表于 2023-12-16 00:19

真奇怪，第一句出来几个符号？不知什么原因啊。

红影 发表于 2023-12-16 00:19

制作很漂亮，欣赏亚伦老师好帖{:4_199:}

亦是金 发表于 2023-12-16 11:45

Html去掉&#65279隐藏字符解决办法（来源：https://blog.csdn.net/baidu_34046383/article/details/73333002）
一：js 解决由于（bom文件格式）产生的空白行把以下代码放到HTML页面的head标签里就行了：var a=document.body.innerHTML;document.body.innerHTML=a.replace(/\ufeff/g,”);
二：是utf-8用记事本编辑代码保存的错误，使代码在保存的时候带上了BOM。最好写代码的时候用编译器编写，不要用记事本编写代码。出现出错后，点击下面的网址下载一个UltraEdithttp://dlsw.baidu.com/sw-search-sp/soft/41/10554/ue_chinese_V22.10.0.12_setup.1436351778.exe具体操作：打开UltraEdit，在UltraEdit里打开带隐藏字符的文件，然后另存为，窗口最下面最左边有一个选项，显示默认，打开下拉条选择utf-8无BOM，然后回车，去你保存的文件位置找到，拖拽到项目里，ok 完成。

亚伦影音工作室 发表于 2023-12-16 12:44

亦是金 发表于 2023-12-16 11:45
Html去掉&#65279隐藏字符解决办法（来源：https://blog.csdn.net/baidu_34046383/article/details/73333002 ...

在别的论坛确实很正常，花潮特殊！

亦是金 发表于 2023-12-16 17:05

我在网页源代码中看到多余的代码，

亚伦影音工作室 发表于 2023-12-16 18:52

很惊讶我前边根本没有！

雨声 发表于 2023-12-17 11:45

漂亮的制作，好听的歌，欣赏问好！
页: [1]
查看完整版本: 奇妙的开头一句