杨帆 发表于 2025-9-4 21:50

《抹去泪水》- 学习亚伦老师帖代码

<style>
#tz { margin: 30px auto; left: calc(50% - 81px); transform: translateX(-50%); width: 1400px; height: 750px;background:var(--bg1), var(--bg2), linear-gradient(45deg, #e56420, #c22525, #3d9c31, #37bbde);overflow: hidden; box-shadow: 2px 2px 6px #333; display: grid; place-items: center; z-index: 1; position: relative; --bg1:url('https://file.uhsea.com/2506/50a028552909d671b833868b8fd11290MI.png') no-repeat center/cover;--bg2:url('https://cccimg.com/view.php/663ab304b513d7308417d1e45b553f26.jpg') no-repeat center/cover; --ma-size:8%;--state:running;}
.intro {margin: 0px0px;width: 100%; height:100%; position: absolute;background:var(--bg1), var(--bg2), linear-gradient(45deg, #e56420, #c22525, #3d9c31, #37bbde);background-size: cover;background-blend-mode:hard-light;animation: hue-rotate 10s linear infinitevar(--state);z-index: 1;}
#player1 { position: absolute; left: 20px; top: 20px; z-index: 5;transition: filter .7s; cursor: pointer;width:var(--ma-size); transform-origin: 50% 100%; animation: swear 1s infinite alternate linear var(--state); display: var(--display);--display:block;transition: .8s;}
#player1:hover { filter: hue-rotate(120deg); }
#player2 { position: absolute;background:var(--bg3); width:var(--ma-size);height: auto;border-radius: 50%;right:5px;bottom:10px;cursor: pointer; transition: .6s; opacity: .8; animation: rot 8s linear infinite var(--state);--bg3:url('https://638183.freep.cn/638183/t22/51/hx.png') no-repeat center/45% 45%; z-index: 5; }
#player2:hover{filter: brightness(2);}
#btnFs { right: 30px; top: 30px; color: #eee; }
#btnFs:hover { color: red; }
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes swear {30% { transform: rotate(-6deg); } 80% { transform: rotate(6deg); } }
@keyframes hue-rotate {5%{ transform:scale(1); opacity: 1;filter: hue-rotate(0deg);}20%{ transform:scale(1); opacity: 1;filter: hue-rotate(360deg);}100%{transform:scale(8);opacity: 0;filter: hue-rotate(0deg)}}
.title-text {font: bold 40px 'Microsoft YaHei', sans-serif; color: #eee;letter-spacing: 2px; text-shadow: 0 0 1px #000, 2px 2px 6px #333; user-select: none; position: absolute;}
.rotate {animation: rotate 1s linear var(--state);}
.ani { animation: flash 1s linear alternate var(--state), rotate 1s linear var(--state); }
@keyframes rotate {from {transform: rotate(0);}to {transform: rotate(360deg);}}
@keyframes flash { to { color:DeepPink; opacity: .7; } }
.lrc {z-index: 1;position: absolute; top: 30%; left: 60%; width: 540px; height: 350px; overflow: hidden; }
.lrc #ul {width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
.lrc #ul li { color: #fff; font: normal 25px 'FZYaoti', sans-serif; transition: .3s all ease; list-style-type: none; text-align: center; display: block;padding: 0 10px; height: 50px;line-height: 50px; margin: 0 auto; cursor: pointer; }
.lrc #ul li.active { transform:scale(1.4);color: #00ff00;font-weight: 650;text-align: center; }
#vid { position: absolute;left:0px;top:0px;width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none;z-index: 0; }
</style>
<div id="tz">
         <audio id="aud" src="https://upfile.mp3.wf/view.php/23aa4fca19dc25fa23f169456d7b6fec.mp3" autoplay loop></audio>
      <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/14/51/00/video636364d43e50d.mp4" autoplay loop muted></video>
      <img id="player1" src="https://638183.freep.cn/638183/small/vuzi.png" title="播放/暂停" />
      <img id="player2"src="https://pic1.imgdb.cn/item/6722130ed29ded1a8c52391c.png"alt="" title="播放/暂停" />      
      <div class='intro'></div>
      <div class="lrc"><ul id="ul"></ul></div>
</div>
<script>
var players = document.querySelectorAll('#player1');
var players = document.querySelectorAll('#player2');
mState = () => {
      tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      tz.style.setProperty('--bg1', aud.paused ? 'none' : '');
      tz.style.setProperty('--bg2', aud.paused ? '' : 'none');
      player2.style.setProperty('--bg3', aud.paused ? 'none' : '' );
      player1.style.setProperty('--display', aud.paused ? 'none' : 'block' );   
      player1.title = aud.paused ? '播放' : '暂停';
      player2.title = aud.paused ? '播放' : '暂停';
};
aud.onplaying = aud.onpause = () => mState();
player1.onclick = player2.onclick = () => aud.paused ? aud.play() : aud.pause();
      let lrc = `
抹去泪水 - 韩宝仪 (HanBaoyi)
词：卡斯
曲：陈宏
爱情常遇暴风雨
人生难免不如意
泪与欢笑成对比
冬去春来是温馨
人生的旅途喜与悲
风风雨雨会过去
命运握在你手里
成功更要靠自己
抹去眼中的泪滴
爱情常遇暴风雨
人生难免不如意
泪与欢笑成对比
冬去春来是温馨
人生的旅途喜与悲
风风雨雨会过去
命运握在你手里
成功更要靠自己
抹去眼中的泪滴
人生的旅途喜与悲
风风雨雨会过去
命运握在你手里
成功更要靠自己
抹去眼中的泪滴

`;
      let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#aud"),
            ul = document.querySelector("#ul"),
            container = document.querySelector(".lrc");         

      for (let i = 0; i < lrcArr.length; i++) {
            var lrcData = lrcArr.split(']');
            if (lrcData.length < 2) continue;
            var lrcTime = lrcData.substring(1);
            var obj = {
                time: parseTime(lrcTime),
                word: lrcData.trim()
            }
            result.push(obj);
      }

      function parseTime(lrcTime) {
            let lrcTimeArr = lrcTime.split(":");
            return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
      }

      function getIndex() {
            let time = audio.currentTime;
            for (let i = 0; i < result.length; i++) {
                if (result.time > time) {
                  return i - 1;
                }
            }
            return result.length - 1;
      }

function createElements() {
    let fragment = document.createDocumentFragment();
    for (let i = 0; i < result.length; i++) {
      let li = document.createElement('li');      
      li.innerText = result.word;      
      li.addEventListener('click', function() {
            audio.currentTime = result.time;
      });      
      fragment.appendChild(li);
    }   
    ul.appendChild(fragment);
}
      createElements();
      let containerHeight = container.clientHeight;
      let liHeight = ul.children?.clientHeight || 50;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;

      function setOffset() {
            const index = getIndex();
            if (index < 0) return;

            const liHeight = ul.children?.clientHeight || 50;
            const offset = liHeight * index - containerHeight / 2 + liHeight / 2;
            ul.style.transform = `translateY(${-offset}px)`;

            ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
            ul.children?.classList.add('active');

            const currentLyric = result.word.trim();
            if (!currentLyric) return;
            const nextTime = result?.time || audio.duration;
            const duration = nextTime - result.time;
            const charIndex = duration > 0 ?
                Math.min(Math.floor((audio.currentTime - result.time) / (duration / currentLyric.length)), currentLyric.length) :
                currentLyric.length;
}

       let rafId;
      audio.addEventListener("timeupdate", () => {
            rafId = requestAnimationFrame(setOffset);
      });

</script>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(tz, player1,player2);
const txtAr = '抹去泪水'.split('');
    let spans = [];
    txtAr.forEach( (t,k) => {
      const s = document.createElement('span');
      s.textContent = t;
      s.className = k === 0 ? 'title-text rotate' : 'title-text';
      s.style.cssText += `left: 50px; top: ${k * 80 + 350}px;`;
      spans.push(s);
      s.onanimationend = () => {
            s.classList.remove('rotate');
            spans[(k+1) % txtAr.length].classList.add('rotate');
s.classList.remove('ani');
            spans[(k + 1) % txtAr.length].classList.add('ani');
      };
       tz.appendChild(s);
    });
</script>


红影 发表于 2025-9-4 21:59

这个制作好漂亮啊，还是变色的变大隐去背景呢。多行歌词也很漂亮。
欣赏杨帆好帖{:4_199:}

红影 发表于 2025-9-4 22:01

这暂停好像换了个图图呢，美女看不到了，最奇妙的播放器里的那颗心形也不见了呢{:4_187:}

杨帆 发表于 2025-9-4 22:28

红影 发表于 2025-9-4 21:59
这个制作好漂亮啊，还是变色的变大隐去背景呢。多行歌词也很漂亮。
欣赏杨帆好帖

谢谢影子鼓励，祝开心{:4_171:}

梦江南 发表于 2025-9-5 07:41

好漂亮的制作，谢谢杨帆精彩分享。{:4_187:}

杨帆 发表于 2025-9-5 08:36

梦江南 发表于 2025-9-5 07:41
好漂亮的制作，谢谢杨帆精彩分享。

问好江南，谢谢鼓励，祝开心{:4_171:}

小辣椒 发表于 2025-9-5 14:47

杨帆这个制作场景很漂亮的{:4_199:}

小辣椒 发表于 2025-9-5 14:48

不知道为什么点击全屏欣赏，出来就一半界面了

杨帆 发表于 2025-9-5 16:28

本帖最后由 杨帆 于 2025-9-5 16:35 编辑

小辣椒 发表于 2025-9-5 14:48
不知道为什么点击全屏欣赏，出来就一半界面了
我这儿全屏显示正常呀
你说的“全屏欣赏”与“一半界面”与背景缩放变换有关吧
谢谢小辣椒鼓励，祝开心{:4_187:}

红影 发表于 2025-9-5 22:09

杨帆 发表于 2025-9-4 22:28
谢谢影子鼓励，祝开心

问好杨帆，晚上好{:4_187:}
页: [1]
查看完整版本: 《抹去泪水》- 学习亚伦老师帖代码