论坛 › 动画音画 › 我等风等雨等不到你[实现元素点击变化]

亚伦影音工作室 发表于 2025-6-26 13:44

我等风等雨等不到你[实现元素点击变化]

本帖最后由 亚伦影音工作室 于 2025-6-26 19:43 编辑 <br /><br /><style>
      #bj {
            position: relative;
            width: 1300px;
            height:700px;
            margin: 10px 0 20px calc(50% - 740px);
            overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
            background:#800 url(https://pic1.imgdb.cn/item/685cdd5258cb8da5c8724514.jpg) no-repeat center / cover;--state:paused;
      }
#wz{width: 540px;height:80px;position: absolute;top:40px; left:60%; color: #ff6600;filter:drop-shadow(#000 1px 1px 1px)drop-shadow(#000 1px 1px 1px);
            font:600 40px 'FZYaoti', sans-serif;transition: all 1s;}

#dh{ width: 100%; height: 100%; position: absolute;
z-index: 1;   
top:0px; left:0px;
animation: rod 2s linear infinite var(--state);}
@keyframes rod{20% {opacity:1;background:linear-gradient(180deg, rgba(124,7,13,0.0643907221091562) 0%, rgba(58,58,241,0.29968483975621496) 0%);}
40% {opacity: 0.6;}
60% {opacity: 0.8;background: linear-gradient(180deg, rgba(124,7,13,0.0643907221091562) 0%, rgba(17,1,1,0.30808820110075286) 0%);}
80% {opacity: 0.4;background:linear-gradient(180deg, rgba(124,7,13,0.0643907221091562) 0%, rgba(241,58,58,0.27167363527442223) 0%);}
100% {opacity: 0.8;background:linear-gradient(180deg, rgba(124,7,13,0.0643907221091562) 0%, rgba(241,190,58,0.29968483975621496) 0%);}
}
#bfq{    transform:scale(0.8);
      position:absolute;
      width: 450px;
      height:350px;overflow: hidden;
      top:0%;background:#0000;
   left: 8%;z-index: 20;}
#tmsg{position: absolute;width: 100px; height: 60px;font:500 12px sans-serif;color: #000;top:20px;left: 200px;}
#tu{   
      position:absolute;
      width: 300px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;
      height:300px;border-radius: 10px;
      top:10%;background:#000 url('http://singerimg.kugou.com/uploadpic/softhead/400/20240410/20240410181106867.jpg ') no-repeat center / cover;
   left: 2%;z-index: 2;}
#cp{   
      position:absolute;
      width: 260px;border-radius: 50%;
      height:260px;animation: rotating 6s infinite linear var(--state);
      top:15%;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
   transition: all 1s;
   left: 41%;z-index: 1;box-shadow:0px 0px 0px 1px #222,0px 0px 0px 0px #880000;}
   @keyframes rotating { to { transform: rotate(360deg); } }
.overlay {
content: '';
left: 0px;
top: 0px;
position: absolute;
width: 260px;
height: 260px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 65%, transparent);
border-radius: 50%;
}


.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 140px;
height: 140px;
box-shadow:0px 0px 0px 1px #eee,0px 0px 0px 0px #eee;
background:#000 url('http://singerimg.kugou.com/uploadpic/softhead/400/20240410/20240410181106867.jpg') no-repeat center / cover;

border-radius: 50%;
}
.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
background: #000;
border-radius: 50%;
}
#bnt{margin: 240px 20px ; width: 30px; height: 30px;position: relative; cursor: pointer; }
#cndpt{position: absolute; width: 30px; height: 30px;
background:#fd050b;transition: all 1s;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 30px; height: 30px;
opacity:0; background:#fd050b;transition: all 1s;
   clip-path: polygon(75% 50%, 0 0, 0 100%)
}

.lrc {z-index: 1;
            position: absolute;
            top: 35%;
            left: 63%;         
            width: 540px;
            height: 250px;
            overflow: hidden;

      }

      .lrc #ul {
            width: 100%;
            padding: 0;
            list-style: none;
            transition: 0.3s all ease;
            margin: 0;
      }

      .lrc #ul li {
            
            color: #000;
            font:600 20px '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 {filter:drop-shadow(#000 1px 1px 1px)drop-shadow(#000 1px 1px 1px);
         transform:scale(1.4);
            color: #ff5500;
      font-weight: 650;
             text-align: center;
             }
    #fullscreen {border-radius: 4px;position: relative;background:#0000 ;
color:#000;box-shadow:0px 0px 0px 1px #000;z-index: 20;
padding: 4px 10px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 90%;top: 90%;
}         
</style>
<div id="bj">
<div id="wz" >任夏*我等风等雨等不到你</div>
<span id="fullscreen" title="屏展模式">全屏欣赏</span>
<div id="dh" ></div>
<div id="bfq">
<div id="tu">
<div id="tmsg">00:00 | 00:00</div>
<div id="bnt" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div>
</div>
<div id="cp"><div class="inner"></div><div class="overlay"></div></div>
</div>
<div class="lrc">
            <ul id="ul"></ul>
      </div>
</div>
<audio id="aud" src="https://s2.cldisk.com/sv-w7/audio/00/80/b2/56965a2f195e21ffeea5fb9743e8657e/audio.mp3" loop autoplay ></audio>

<script>
      let lrc = `
我等风等雨等不到你
演唱：任夏
出品：亚伦影音工作室
我等风等雨等不到你
我早已不在你心里
明知道我们再回不去
可我还是不争气
放不下你
一个人的黑夜太难熬
两个人的回忆太煎熬
是我给的爱太过讨好
才会让你想要逃
一个人的想念太可笑
两个人的过往删不掉
几年的陪伴你都忘掉
丢下我如何是好
我等风等雨等不到你
我早已不在你心里
那山盟海誓没了归期
如今谁替我拥抱你
我问风问雨问不到你
你现在到底在哪里
明知道我们再回不去
可我还是不争气
放不下你
一个人的黑夜太难熬
两个人的回忆太煎熬
是我给的爱太过讨好
才会让你想要逃
一个人的想念太可笑
两个人的过往删不掉
几年的陪伴你都忘掉
丢下我如何是好
我等风等雨等不到你
我早已不在你心里
那山盟海誓没了归期
如今谁替我拥抱你
我问风问雨问不到你
你现在到底在哪里
明知道我们再回不去
可我还是不争气
放不下你
我等风等雨等不到你
我早已不在你心里
那山盟海誓没了归期
如今谁替我拥抱你
我问风问雨问不到你
你现在到底在哪里
明知道我们再回不去
可我还是不争气
放不下你
`;
      let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#aud");
      var ul = document.querySelector("#ul");
      var 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;
                  setOffset();
                });

                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;
            let offset = liHeight * index - containerHeight / 2 + liHeight / 2;

            offset = Math.max(minOffset, Math.min(offset, maxOffset));

            ul.style.transform = `translateY(${-offset}px)`;

            ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
            if (index < ul.children.length) {
                ul.children.classList.add('active');
            }
      }

      audio.addEventListener("timeupdate", setOffset);
   
audio.addEventListener('timeupdate', () => {
                tmsg.innerText = toMin(audio.currentTime) + ' | ' + toMin(audio.duration);});
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;
      };      

var mState = () => audio.paused ?
( bj.style.setProperty('--state', 'paused'),bnt.title = '点击播放' ) :
( bj.style.setProperty('--state', 'running'),bnt.title = '点击暂停' );


audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());

bnt.onclick = () => audio.paused ? (audio.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1',document.getElementById("cp").style.left = '41%',document.getElementById("wz").style.left = '60%',document.getElementById("wz").style.top = '40px') : (audio.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0',document.getElementById("cp").style.left = '15%',document.getElementById("wz").style.left = '30px',document.getElementById("wz").style.top = '80%');
let fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
                bj.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };
</script>

红影 发表于 2025-6-26 18:30

变色背景漂亮，歌曲好听。很伤感的歌儿。
欣赏亚伦老师好帖{:4_187:}

红影 发表于 2025-6-26 18:32

点击暂停，会让标题字从上面移动到下面，还能让光盘收到图片后面。
这个倒是没想到呢。很奇妙的做法{:4_199:}

杨帆 发表于 2025-6-26 21:03

奇妙的特效，谢谢亚伦老师精彩分享{:4_191:}

查看完整版本: 我等风等雨等不到你[实现元素点击变化]