论坛 › 欢乐水吧 › 背景溶图《我和我的祖国》

亚伦影音工作室 发表于 2024-2-25 17:15

背景溶图《我和我的祖国》

本帖最后由 亚伦影音工作室 于 2024-2-25 17:15 编辑 <br /><br /><style>
#papa { margin: 10px -300px ; width: 1164px; height: 640px;background: linear-gradient(123deg, #FB0000 15%,rgba(248, 0, 0, 0) 75%),url(https://pic.imgdb.cn/item/65dafe359f345e8d0370ba57.jpg) no-repeat center/cover; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #800000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;border-radius: 0px 0px;}
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 50%; transform: translate(-50%);top: 20px;font:normal 3em 华文新魏; 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); } }
#player {margin:0 auto;position: absolute;top:5%; left:6%;width: 400px;height: 400px;cursor: pointer;animation: spin 0.15s infinite linear;}
.leaf {position: absolute;width: 20%;height: 20%;clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);border:2px solid #ffffff;transform-origin: 200% 200%;}
.leaf:nth-of-type(1) {background: #fff000;transform: rotate(45deg)translate(70px);}
.leaf:nth-of-type(2) {background:#fff000;transform: rotate(90deg)translateX(70px);}
.leaf:nth-of-type(3) {background:#fff000;transform: rotate(135deg)translateX(70px);}
.leaf:nth-of-type(4) {background:#fff000;transform: rotate(180deg)translateX(70px);}
.leaf:nth-of-type(5) {background:#fff000;transform: rotate(288deg)translate(220px,200px)scale(2);}
@keyframes spin {0% { transform: rotate(0deg);filter:hue-rotate(360deg) ;}}
#mplayer { position: absolute; text-align: center; top: 520px; z-index: 60;color:#ffffff;}
#mplayer::before {position: absolute;content: attr(data-tt);left: 0;bottom: 25px;width: 100%;text-align-last: justify;}
#mprog { width: 240px; accent-color: darkgreen; outline: none; cursor: pointer; }
#btnplay { width: 60px; height: 60px; cursor: pointer; animation: rotating 6s infinite linear var(--state); }
@keyframes rotating { to { transform: rotate(360deg); } }

</style>
<div id="papa">

<audio id="aud"autoplay="autoplay" loop="loop" >
<source src="https://sharefs.ali.kugou.com/202402251703/167ee8ee9ff20c820925b06216eebf94/v3/c8e453ab622df160fd1da477f17ae105/yp/full/a1000_u0_p409_s284263085.mp3" type="audio/mp3" /><embed width="0%" height="44px" src="https://sharefs.ali.kugou.com/202402251703/167ee8ee9ff20c820925b06216eebf94/v3/c8e453ab622df160fd1da477f17ae105/yp/full/a1000_u0_p409_s284263085.mp3" /></embed></audio>

<div id="player">
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
</div>
<div id="mplayer" data-tt="00:00 00:00">
<img id="btnplay" src="https://pic.imgdb.cn/item/65b75c8f871b83018a83e1c1.png" title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度" />
</div>
<div data-lrc="亚伦影音工作室" id="lrc" title="歌词显示">亚伦影音工作室</div>
</div>

<script>
var mseek = false;
var mState = () => aud.paused ?
( btnplay.style.setProperty('--state', 'paused'), btnplay.title = '点击播放' ) :
( btnplay.style.setProperty('--state', 'running'), btnplay.title = '点击暂停' );
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('timeupdate', () => {
if (!mseek) mprog.value = aud.currentTime / aud.duration * mprog.max;
mplayer.dataset.tt = toMin(aud.currentTime) + ' ' + toMin(aud.duration);
});
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () => aud.currentTime = aud.currentTime = mprog.value / mprog.max * aud.duration;
btnplay.onclick = () => aud.paused ? (aud.play(),paused) :( aud.pause(),running);
player.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>player.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>player.style.animationPlayState = 'paused');
</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); /*获得歌词数组*/
})();
</script>

红影 发表于 2024-2-25 18:26

漂亮的代码制作的五星红旗，漂亮的溶图效果。欣赏亚伦老师好帖{:4_187:}

樵歌 发表于 2024-2-25 21:11

非常精彩！这个怕是高难度技术！

查看完整版本: 背景溶图《我和我的祖国》