论坛 › 欢乐水吧 › 《夕阳下》（套用黑黑、小辣椒源码）

相约爱晚亭 发表于 2022-11-10 15:51

《夕阳下》（套用黑黑、小辣椒源码）

<style>
#papa {
      margin: 100px 0 0 calc(50% - 681px);
      width: 1200px;
      height: 675px;
      background: gray url('https://s1.ax1x.com/2022/11/10/zpo6U0.jpg') no-repeat center/cover;
      display: grid;
      place-items: center;
      box-shadow: 3px 3px 20px #000;
      user-select: none;
      overflow: hidden;
      perspective: 1000px;
      position: relative;
      z-index: 1;
}

#mplayer {
      position: absolute;
      bottom: 20px; left: 100px;
      grid-template-columns: auto auto auto;
      gap: 6px;
      display: grid;
      place-items: center;
      font: normal 16px sans-serif;
      color: snow;
      z-index: 999;
}

#btnplay {
      margin-right: -4px;
      width: 30px;
      height: 30px;

      font: bold 30px/30px serif;
      text-align: center;
      cursor: pointer;
      animation: rot 4s infinite linear;
      animation-play-state: var(--state);
      --state: paused;
}

#prog {
      width: 200px;
      height: 20px;
      cursor: pointer;
}

#lrc {
      --state: running;
      --motion: cover2;
      --tt: 1s;
      position: absolute;
      top: 60px;
      font: bold 2.4em sans-serif;
      color: hsl(240, 50%, 90%);
      -webkit-background-clip: text;
      filter: drop-shadow(1px 1px 2px hsla(30, 10%, 10%, .95));
      z-index: 1000;
}

#lrc::before {
      position: absolute;
      content: attr(data-lrc);
      width: 20%;
      height: 100%;
      color: transparent;
      overflow: hidden;
      white-space: nowrap;
      background: linear-gradient(180deg, hsla(240, 60%, 50%, .45), hsla(240, 100%, 60%, .75));
      filter: inherit;
      -webkit-background-clip: text;
      animation: var(--motion) var(--tt) linear forwards;
      animation-play-state: var(--state);
}
.star {
      --rr: 300px;
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 50% 50% 25% 50%;
      transform-origin: 50% 50%;
      transform-style: preserve-3d;
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes fly { to { transform: rotate(0) translate(0); } }
</style>

<div id="papa">
      <div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
      <div id="mplayer">
                <span id="btnplay">✿</span>
                <meter id="prog" low="30" high="90" max="100" optimum="100" value="1"></meter>
                <span id="tmsg">00:00 | 00:00</span>
      </div>
</div>
<audio id="aud" src="https://pan.365.tf/uploads/dengkh/橄榄树-黑鸭子.mp3" loop autoplay></audio>

<script>
(function() {
let mKey = 0, mSeek = false, mFlag = true;
   let lrcAr = [
      ['0.71', '橄 榄 树',7.5],
['8.57', '黑鸭子演唱组 ：橄榄树',6.3],
['15.18', '词: 三毛 曲: 李泰祥',3.8],
['19.22', 'LRC歌词制作 相约爱晚亭',19.8],
['40.01', '不要问我从那里来',5.5],
['45.83', '我的故乡在远方',5.7],
['51.80', '为什么流浪',4.8],
['56.82', '流浪远方 流浪',14.3],
['71.86', '为了天空飞翔的小鸟',5.7],
['77.85', '为了山间轻流的小溪',5.8],
['83.97', '为了宽阔的草原',3.7],
['87.88', '流浪远方 流浪',14.2],
['102.77', '还有还有',3.7],
['106.62', '为了梦中的橄榄树橄榄树',7.7],
['114.72', '不要问我从那里来',6.0],
['121.00', '我的故乡在远方',9.3],
['130.77', '为什么流浪',3.6],
['134.57', '为什么流浪远方',10.2],
['145.31', '为了我梦中的橄榄树',10.9],
['156.79', 'LRC歌词制作 相约爱晚亭',13.9],
['171.37', '不要问我从那里来',5.6],
['177.22', '我的故乡在远方',5.7],
['183.17', '为什么流浪',5.3],
['188.77', '流浪远方 流浪',13.8],
['203.30', '为了天空飞翔的小鸟',5.2],
['208.74', '为了山间轻流的小溪',6.3],
['215.34', '为了宽阔的草原',4.8],
['220.38', '流浪远方 流浪',10.9],
['231.83', '谢谢光临欣赏',2.1],
['234.01', '',4.5]
];
      (function() {
                Array.from({length: 100}).forEach((item,key) => {
                        item = document.createElement('span');
                        item.className = 'star';
                        let ww = Math.ceil(Math.random() * 20) | 10;
                        item.style.cssText += `
                              width: ${ww}px;
                              height: ${ww}px;
                              left: ${Math.random()*10 + 300}px;
                              top: ${Math.random()*0 + 140}px;
                              background: hsla(${360*Math.random()},100%,50%,.75);
                              transform: rotate(${Math.random() * 720}deg) translate3d(${Math.random() * 500}px,${Math.random() * 300}px,${Math.random() * 1000}px);
                              animation: fly 80s infinite ${-10 - Math.random() * 20}s linear;
                        `;
                        papa.appendChild(item);
                });
      })();
      btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
      prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('play', () => mState());
      aud.addEventListener('seeked', () => calcKey());
      aud.addEventListener('timeupdate', () => {
                prog.value = aud.currentTime / aud.duration * 100;
                tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;
                for (j = 0; j < lrcAr.length; j++) {
                        if (aud.currentTime >= lrcAr) {
                              if (mKey === j) showLrc(lrcAr);
                              else continue;
                        }
                }
      });
      let mState = () => aud.paused ? (btnplay.style.setProperty('--state', 'paused'), lrc.style.setProperty('--state', 'paused')) : (btnplay.style.setProperty('--state', 'running'), lrc.style.setProperty('--state', 'running'));
      let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
      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;};
})();
</script>
<br><br><br><br><br></td></tr>

加林森 发表于 2022-11-10 16:39

制作漂亮。赞！{:4_199:}

樵歌 发表于 2022-11-10 19:08

好一个美字了得！{:4_178:}

红影 发表于 2022-11-10 21:10

这个飘拂的泡泡效果在这个背景下美极了，欣赏爱晚亭精美制作{:4_187:}

小辣椒 发表于 2022-11-10 22:26

问好爱晚亭，我改这个大粒子位置是因为图图里面加了个人物是脸朝上看的，所以我把这些粒子集中在图图的一角了，其实你这个人物在图图中间可以用黑黑的源码效果

小辣椒 发表于 2022-11-10 22:27

欣赏爱晚亭的精彩制作{:4_199:}

相约爱晚亭 发表于 2022-11-11 10:29

加林森 发表于 2022-11-10 16:39
制作漂亮。赞！

谢谢加林森的鼎力支持和鼓励！

相约爱晚亭 发表于 2022-11-11 10:31

樵歌 发表于 2022-11-10 19:08
好一个美字了得！

谢谢樵歌的临帖美评！

相约爱晚亭 发表于 2022-11-11 10:32

红影 发表于 2022-11-10 21:10
这个飘拂的泡泡效果在这个背景下美极了，欣赏爱晚亭精美制作

谢谢红影的鼎力支持和临帖美评！

相约爱晚亭 发表于 2022-11-11 10:34

小辣椒 发表于 2022-11-10 22:26
问好爱晚亭，我改这个大粒子位置是因为图图里面加了个人物是脸朝上看的，所以我把这些粒子集中在图图的一角 ...

你的修改我觉得很好，借用了，谢谢你的建议！

相约爱晚亭 发表于 2022-11-11 10:35

小辣椒 发表于 2022-11-10 22:27
欣赏爱晚亭的精彩制作

谢谢小辣椒的支持和鼓励！

加林森 发表于 2022-11-11 11:33

相约爱晚亭 发表于 2022-11-11 10:29
谢谢加林森的鼎力支持和鼓励！

不客气。{:4_190:}

梦缘 发表于 2022-11-11 19:27

帖子好看，感谢老师的分享，欣赏问好！{:4_187:}

小辣椒 发表于 2022-11-11 20:03

相约爱晚亭 发表于 2022-11-11 10:34
你的修改我觉得很好，借用了，谢谢你的建议！

问好爱晚亭，喜欢的尽管拿去玩

小辣椒 发表于 2022-11-11 20:03

相约爱晚亭 发表于 2022-11-11 10:35
谢谢小辣椒的支持和鼓励！

不客气，其实你的东东都很漂亮的

红影 发表于 2022-11-11 21:41

相约爱晚亭 发表于 2022-11-11 10:32
谢谢红影的鼎力支持和临帖美评！

客气了，这个帖子非常漂亮{:4_187:}

樵歌 发表于 2022-11-12 07:30

相约爱晚亭 发表于 2022-11-11 10:31
谢谢樵歌的临帖美评！

早上好{:4_190:}

相约爱晚亭 发表于 2022-11-12 13:57

梦缘 发表于 2022-11-11 19:27
帖子好看，感谢老师的分享，欣赏问好！

谢谢梦缘的问候和美评！

相约爱晚亭 发表于 2022-11-12 14:14

红影 发表于 2022-11-11 21:41
客气了，这个帖子非常漂亮

昨天我套用亚伦老师的源码制作了一个《软翻书》帖，在本论坛因代码量超标而不能发布，为什么亚伦的代码帖却能发布呢？

红影 发表于 2022-11-12 20:53

相约爱晚亭 发表于 2022-11-12 14:14
昨天我套用亚伦老师的源码制作了一个《软翻书》帖，在本论坛因代码量超标而不能发布，为什么亚伦的代码帖 ...

这个我也不懂，我对电脑知识完全小白{:4_173:}

查看完整版本: 《夕阳下》（套用黑黑、小辣椒源码）