朵拉 发表于 2022-10-30 16:50

半山腰 TO:樵歌

本帖最后由 朵拉 于 2022-10-30 21:20 编辑 <br /><br /><style>
#papa { position: relative; left: -214px; width: 1024px; height: 640px; background: teal url('https://pic1.imgdb.cn/item/635e39eb16f2c2beb1c8ab29.jpg') no-repeat center/cover; display: grid; grid-template-areas: 'head head head' 'mid mid mid' 'foot foot foot'; box-shadow: 3px 3px 20px #000; user-select: none; z-index: 1; }
#papa > div { position: relative; display: grid; }
#pa_top { grid-area: head; place-items: center start; }
#pa_mid { grid-area: mid; place-items: start start; }
#pa_foot { grid-area: foot; place-items: center; }
#btnplay { --dur: 6s; position: absolute; bottom: 20px; width: 40px; height: 40px; font: bold 40px/40px serif; text-align: center; color: orange; cursor: pointer; animation: rot linear var(--dur) infinite; }
#lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute; font: bold 2.4em sans-serif; color: hsl(240,100%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(100,100%,50%,.75),hsla(0,100%,50%,.65)); 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 rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <div id="pa_top">
                <img src="https://638183.freep.cn/638183/t22/hl/fwhe0.gif" alt="" style="position: absolute; width: 544px;" />
      </div>
      <div id="pa_mid"><img src="https://638183.freep.cn/638183/t22/hl/fwhe2.gif" alt="" style="width: 120px; opacity: .45; mix-blend-mode: soft-light;" /></div>
      <div id="pa_foot">
                <span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span>
                <span id="btnplay">☯</span>
      </div>
</div>

<script>
(function() {
      let mKey = 0, mFlag = true, aud = new Audio();
      let lrcAr = [,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ];
      aud.src = 'https://music.163.com/song/media/outer/url?id=1965555401.mp3';
      aud.loop = false;
      aud.autoplay = true;
      papa.oncontextmenu = () => false;
      btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('play', () => mState());
      aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
      aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
      let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.animationPlayState = '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;};
})();
</script>

朵拉 发表于 2022-10-30 17:20

@马黑黑
马老师 看过来，学习了歌词颜色的变化，
播放器按钮的颜色语句米找到{:4_190:}

朵拉 发表于 2022-10-30 17:23

这首歌词 可以品一品~~

亦是金 发表于 2022-10-30 18:19

播放器按钮的颜色语句 在#btnplay中：color: purple;   （我试着改为 红色，color: red;   或    color: #ff0000;）

朵拉 发表于 2022-10-30 18:40

亦是金 发表于 2022-10-30 18:19
播放器按钮的颜色语句 在#btnplay中：color: purple;   （我试着改为 红色，color: red;   或    color ...

谢谢金老师，我试一试{:4_190:}

小辣椒 发表于 2022-10-30 20:03

欣赏朵拉的精彩制作{:4_187:}

马黑黑 发表于 2022-10-30 20:12

朵拉 发表于 2022-10-30 17:20
@马黑黑
马老师 看过来，学习了歌词颜色的变化，
播放器按钮的颜色语句米找到

很精美的制作，赞。


#btnplay { --dur: 6s; position: absolute; bottom: 20px; width: 40px; height: 40px; font: bold 40px/40px serif; text-align: center; color: purple; cursor: pointer; animation: rot linear var(--dur) infinite; }

朵拉 发表于 2022-10-30 20:47

马黑黑 发表于 2022-10-30 20:12
很精美的制作，赞。



谢谢马师指点，您再瞧瞧 还有哪里不足{:4_190:}

红影 发表于 2022-10-30 20:48

漂亮的制作，欣赏朵宝好帖{:4_204:}

马黑黑 发表于 2022-10-30 20:49

朵拉 发表于 2022-10-30 17:23
这首歌词 可以品一品~~

深刻

马黑黑 发表于 2022-10-30 20:49

朵拉 发表于 2022-10-30 20:47
谢谢马师指点，您再瞧瞧 还有哪里不足

可以了

朵拉 发表于 2022-10-30 21:21

@樵歌
樵歌 晚上好，收礼哈{:4_190:}

大猫咪 发表于 2022-10-31 13:00

真漂亮，画面唯美，朵拉制作真棒，樵哥哥收礼开心！

{:4_204:}{:4_199:}

樵歌 发表于 2022-11-2 21:13

朵拉 发表于 2022-10-30 21:21
@樵歌
樵歌 晚上好，收礼哈

谢谢朵儿，收礼来迟，都怪我没看提醒，今天看手机提醒才知道有惊喜！{:4_190:}

樵歌 发表于 2022-11-2 21:14

喜欢画面的水墨意境！喜欢 歌词的意味！朵儿有心了哈。{:4_204:}

樵歌 发表于 2022-11-2 21:15

大猫咪 发表于 2022-10-31 13:00
真漂亮，画面唯美，朵拉制作真棒，樵哥哥收礼开心！

也不到樵哥哥窗前叫几声，今天才来收{:4_173:}

绿叶清舟 发表于 2022-11-2 21:46

画面真漂亮，那个动图用在这太美了

冬天的雨 发表于 2022-11-4 11:54

马黑黑 发表于 2022-10-30 20:12
很精美的制作，赞。




马老师现场教学{:4_178:}

马黑黑 发表于 2022-11-4 12:19

冬天的雨 发表于 2022-11-4 11:54
马老师现场教学

{:4_191:}
页: [1]
查看完整版本: 半山腰 TO:樵歌