宿命 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2022-11-1 07:19

宿命

马黑黑 发表于 2022-11-1 07:29

本帖最后由马黑黑于 2022-11-1 20:58 编辑

参考代码（全）<style>
#papa {
   --state: paused;
   margin: auto;
   width: 1262px;
   height: 710px;
   background: #666 url('https://638183.freep.cn/638183/t22/webp/sumk.webp') no-repeat center/cover;
   box-shadow: 3px 3px 20px #000;
   display: grid;
   place-items: center;
   opacity: .95;
   position: relative;
   z-index: 1;
}

#papa::before {
   position: absolute;
   content: '';
   left: 0;
   top: 0;
   bottom: 0;
   right: 0;
   background: #000;
   opacity: .0;
   animation: darker linear 1.2s infinite alternate;
   transition: all 1.2s;
   animation-play-state: var(--state);
}

#mplayer {
   position: absolute;
   display: grid;
   grid-template-areas: 'cur btnplay dur''prog prog prog';
   gap: 4px;
   place-items: end center;
   font-size: 14px;
   bottom: 20px;
}

#cur {
   grid-area: cur;
   color: snow;
}

#dur {
   grid-area: dur;
   color: snow;
}

#btnplay {
   grid-area: btnplay;
   display: grid;
   grid-auto-flow: column;
   place-items: end center;
   gap: 0 4px;
   height: 60px;
   cursor: pointer;
}

#btnplay>span {
   background: red;
   width: 4px;
   transition: .6s;
   opacity: .95;
}

#prog {
   --ww: 0px;
   grid-area: prog;
   width: 300px;
   height: 12px;
   border-radius: 6px;
   background: snow;
   opacity: .65;
   cursor: pointer;
   position: relative;
}

#prog::before {
   position: absolute;
   content: '';
   width: var(--ww);
   height: 12px;
   border-radius: 6px;
   background: snow linear-gradient(90deg, green, red);
   opacity: .65;
}

#lrc {
   --motion: cover1;
   --tt: 5s;
   position: absolute;
   top: 20px;
   font: bold 2.4em sans-serif;
   color: hsl(0, 10%, 90%);
   -webkit-background-clip: text;
   filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
}

#lrc::before {
   position: absolute;
   content: attr(data-lrc);
   width: 20%;
   height: 100%;
   color: transparent;
   overflow: hidden;
   white-space: nowrap;
   background: linear-gradient(180deg, hsla(60, 0%, 0%, .45), hsla(60, 100%, 50%, .75));
   filter: inherit;
   -webkit-background-clip: text;
   animation: var(--motion) var(--tt) linear forwards;
   animation-play-state: var(--state);
}

@keyframes cover1 {
   from { width: 0; }
   to { width: 100%; }
}

@keyframes cover2 {
   from { width: 0; }
   to { width: 100%; }
}

@keyframes darker {
   from { opacity: 0; }

   to { opacity: .45; }
}
</style>

<div id="papa">
   <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
   <div id="mplayer">
            <div id="cur">00:00</div>
            <div id="btnplay"></div>
            <div id="dur">00:00</div>
            <div id="prog"></div>
   </div>
   <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1968070479.mp3" loop autoplay></audio>
</div>

<script>
(function() {
   let mKey = 0,
            mFlag = true;
   let lrcAr = [
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,
            ,

   ];
   for (j = 0; j < 20; j++) {
            let pinpu = document.createElement('span');
            pinpu.className = 'pinpu';
            pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;
            btnplay.appendChild(pinpu);
   }
   btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
   prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
   aud.addEventListener('seeked', () => calcKey());
   aud.addEventListener('pause', () => mState());
   aud.addEventListener('play', () => mState());
   aud.addEventListener('timeupdate', () => {
            let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;
            prog.style.setProperty('--ww', prg + 'px');
            cur.innerText = toMin(aud.currentTime);
            dur.innerText = toMin(aud.duration);
            setPinpu();
            for (j = 0; j < lrcAr.length; j++) {
                     if (aud.currentTime >= lrcAr) {
                           cKey = j;
                           if (mKey === j) showLrc(lrcAr);
                           else continue;
                     }
            }
   });
   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 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 mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), papa.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'), papa.style.setProperty('--state', 'running'));
   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 setPinpu = () => {
            let eles = document.querySelectorAll('.pinpu');
            eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);
   };
})();
</script>

相约爱晚亭 发表于 2022-11-1 07:53

欣赏精美音画佳作！

闲言不语 发表于 2022-11-1 10:59

马黑新作，必须点赞！{:4_199:}

醉美水芙蓉 发表于 2022-11-1 11:47

醉美水芙蓉 发表于 2022-11-1 11:50

马黑黑 发表于 2022-11-1 12:22

醉美水芙蓉发表于 2022-11-1 11:50
图片若隐若现，一闪一闪亮晶晶！很漂亮！

这是 #papa 的伪元素，它背景是深色的，覆盖整个主画面，然后设置透明度，并让透明度通过 animation 调用 @keyframes 关键帧动画，动画内容是令伪元素的透明度在一个幅度内来回变换。

马黑黑 发表于 2022-11-1 12:23

醉美水芙蓉发表于 2022-11-1 11:47
欣赏黑黑老师新帖，画面变色漂亮！

还行的吧

马黑黑 发表于 2022-11-1 12:23

相约爱晚亭发表于 2022-11-1 07:53
欣赏精美音画佳作！

感谢支持

马黑黑 发表于 2022-11-1 12:23

闲言不语发表于 2022-11-1 10:59
马黑新作，必须点赞！

非常感谢！

红影发表于 2022-11-1 13:00

虽然暂时看不到播放效果，但是觉得这个背景特别美。给黑黑点赞{:4_199:}

马黑黑 发表于 2022-11-1 20:13

红影发表于 2022-11-1 13:00
虽然暂时看不到播放效果，但是觉得这个背景特别美。给黑黑点赞

{:4_176:}

小辣椒 发表于 2022-11-1 20:18

黑黑这个教程代码写着（全），那我今天就做这个了{:4_173:}

小辣椒 发表于 2022-11-1 20:19

今天这个代码格式和前面几次分享的不一样，做一次实践一下

红影发表于 2022-11-1 20:31

马黑黑发表于 2022-11-1 20:13

看到了，所有效果都能被暂停控制，真棒{:4_187:}

红影发表于 2022-11-1 20:37

   left: 0;
   top: 0;
   bottom: 0;
   right: 0;

这个奇特，为什么这么设置？设个左和上以及宽高不可以么？

马黑黑 发表于 2022-11-1 20:48

本帖最后由马黑黑于 2022-11-1 20:53 编辑

红影发表于 2022-11-1 20:37
left: 0;
top: 0;
bottom: 0;

我记得说过一次的。这等同于：

left: 0; top: 0; width: 100%; height: 100%;

当子元素左上角为{0,0}，则，当其尺寸和父元素一致，那么，它的 right 和 bottom 值也都是0。

还有一个更绝妙的表示方法：

inset: 0;

inset: 0 等同于 left:0; top: 0; right: 0; bottom: 0;

又等同于：left: 0; top: 0; width: 100%; height: 100%

以上三种全覆盖父元素的子元素的设定的成立，建立在两个基础之上：① 父元素定位；② 子元素绝对定位

马黑黑 发表于 2022-11-1 20:48

红影发表于 2022-11-1 20:31
看到了，所有效果都能被暂停控制，真棒

还可以

马黑黑 发表于 2022-11-1 20:53

小辣椒发表于 2022-11-1 20:18
黑黑这个教程代码写着（全），那我今天就做这个了

俺啥时候的代码都是全的

马黑黑 发表于 2022-11-1 20:54

小辣椒发表于 2022-11-1 20:19
今天这个代码格式和前面几次分享的不一样，做一次实践一下

大同小异的

页: [1] 2 3 4

花潮论坛's Archiver

宿命