阿鲁卓玛 - 映山红 - 欢乐水吧 - 花潮论坛

马黑黑 发表于 2022-10-10 08:50

阿鲁卓玛 - 映山红

马黑黑 发表于 2022-10-10 08:50

代码
<style>
#papa { left: -214px; width: 1024px; height: 640px; background: teal url('https://638183.freep.cn/638183/t22/webp/ysh.webp') no-repeat center/cover; display: grid; place-items: center; overflow: hidden; position: relative; z-index: 1; }
#btnplay { --dur: 10s; position: absolute; top: 30%; width: 40px; height: 40px; font: bold 40px/40px serif; text-align: center; color: red; cursor: pointer; animation: rot linear var(--dur) infinite; }
.mpic { position: absolute; left: 1024px; top: 60px; width: 120px; mix-blend-mode: multiply; animation: fly linear 40s infinite; }
#lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute; top: 15px; font: bold 2.4em sans-serif; color: hsl(0,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(0,100%,50%,.75),hsla(60,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); } }
@keyframes fly { to { left: -120px; } }
</style>

<div id="papa">
<img class="mpic" src="https://638183.freep.cn/638183/t22/hl/kite1.gif" alt="" />
<span id="btnplay">★</span>
<span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2021/09/21/2926751e89bb5eeb059319bb807e62d0.mp3" autoplay= "autoplay"></audio>

<script>
(function() {
let mKey = 0, mFlag = true, slip = 0.5;
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,];
aud.loop = 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 - slip >= 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-10 09:00

这个没啥，试一下文本五角星做按钮。字体家族选 sans-serif 不理想，★不好绝对居中，改用 serif；sans-serif无衬线，类似黑体字效果，后者有衬线，类似楷体字效果。

歌词同步方面，未做微调，寻来的lrc歌词用空歌词做了标记，不太准但也勉强，转换后将空歌词删掉即可。爱歌词网对歌词的处理，好像都这么干。

红影发表于 2022-10-10 09:12

一进来就先看到了漂亮的风筝，飘飘荡荡的，很有趣。
这个五角星做按钮也好，正好跟歌曲的含义相配，红星代表着红军{:4_187:}

红影发表于 2022-10-10 09:13

马黑黑发表于 2022-10-10 09:00
这个没啥，试一下文本五角星做按钮。字体家族选 sans-serif 不理想，★不好绝对居中，改用 serif；sans-ser ...

寻来的lrc歌词用空歌词做了标记，转换后将空歌词删掉即可。
没看懂，这个是怎么玩的？

红影发表于 2022-10-10 09:19

歌词同步的颜色配得漂亮。在群山之上放一颗红星，很有些旷远的味道。无论用什么效果，和背景和歌曲都协调的就是美{:4_187:}

梦缘发表于 2022-10-10 10:52

新的元素，感谢老师的精彩分享，欣赏问好！{:4_171:}

小辣椒 发表于 2022-10-10 12:05

黑黑，这个自己捣鼓按钮一定要代码制作吗？加图片链接可以吗

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

小辣椒发表于 2022-10-10 12:05
黑黑，这个自己捣鼓按钮一定要代码制作吗？加图片链接可以吗

图片当然可以，但是还是要通过代码将图片放上去替代★，并且需要更改部分代码，如修改尺寸、前景色代码不要等。

马黑黑 发表于 2022-10-10 12:16

红影发表于 2022-10-10 09:13
寻来的lrc歌词用空歌词做了标记，转换后将空歌词删掉即可。
没看懂，这个是怎么玩的？

好像我说的是人话的吧{:4_173:}

那里提供的lrc歌词，有很多行是空歌词的行，空行有起唱时间信息，它的意思就是上一句有歌词的唱到这里歌词唱完。

马黑黑 发表于 2022-10-10 12:17

红影发表于 2022-10-10 09:12
一进来就先看到了漂亮的风筝，飘飘荡荡的，很有趣。
这个五角星做按钮也好，正好跟歌曲的含义相配，红星代 ...

{:4_181:}

马黑黑 发表于 2022-10-10 12:17

红影发表于 2022-10-10 09:19
歌词同步的颜色配得漂亮。在群山之上放一颗红星，很有些旷远的味道。无论用什么效果，和背景和歌曲都协调的 ...

{:5_108:}

马黑黑 发表于 2022-10-10 12:18

梦缘发表于 2022-10-10 10:52
新的元素，感谢老师的精彩分享，欣赏问好！

{:5_108:}

小辣椒 发表于 2022-10-10 12:22

马黑黑发表于 2022-10-10 12:10
图片当然可以，但是还是要通过代码将图片放上去替代★，并且需要更改部分代码，如修改尺寸、前景色代码不 ...

哦~~~那就算了，昨天晚上弄到很迟，不会捣鼓，还有那个路径真的弄不好，本来想想直线上去很简单，就是弄不好，后来只得改道了，晚上上传后发了看看

马黑黑 发表于 2022-10-10 12:49

小辣椒发表于 2022-10-10 12:22
哦~~~那就算了，昨天晚上弄到很迟，不会捣鼓，还有那个路径真的弄不好，本来想想直线上去很简单，就是弄 ...
图片代码你会加就好办的：

① HTML代码：★删掉，用图片代码

② CSS根据图片大小修改一下红色部分的数值、蓝色的不要：

#btnplay {
   --dur: 10s;
   position: absolute;
   top: 30%;
   width: 40px;
   height: 40px;
   font: bold 40px/40px serif;
   text-align: center;
   color: red;
   cursor: pointer;
   animation: rot linear var(--dur) infinite;
}

马黑黑 发表于 2022-10-10 12:50

小辣椒发表于 2022-10-10 12:22
哦~~~那就算了，昨天晚上弄到很迟，不会捣鼓，还有那个路径真的弄不好，本来想想直线上去很简单，就是弄 ...

你不理解路径的语法，能弄好的话是靠运气

马黑黑 发表于 2022-10-10 12:54

映山红就是杜鹃花，泛指各种红色的杜鹃花，是杜鹃的一种通俗叫法，植株属于落叶灌木，分枝多而纤细，叶片常集生枝端，花朵则簇生于枝顶，花梗较长，花色丰富艳丽，一般生长于海拔500-1200米的山地疏灌丛或松林下。

马黑黑 发表于 2022-10-10 12:56

歌曲《映山红》是由陆柱国作词，傅庚辰作曲，邓玉华演唱的歌曲，亦是电影《闪闪的红星》的插曲，该曲创作于1974年，后收录在邓玉华于1998年10月26日发行的专辑《20世纪中华歌坛名人百集珍藏版》中。

本帖歌曲演唱者阿鲁阿卓，应该是2016年的翻唱。

加林森 发表于 2022-10-10 13:04

老歌新唱。有味道。{:4_199:}

小辣椒 发表于 2022-10-10 13:18

马黑黑发表于 2022-10-10 12:50
你不理解路径的语法，能弄好的话是靠运气

我是瞎蒙的

页: [1] 2 3 4 5 6 7 8

花潮论坛's Archiver

阿鲁卓玛 - 映山红