庆庆：空心

马黑黑 发表于 2024-2-17 09:11

马黑黑 发表于 2024-2-17 09:12

本帖最后由马黑黑于 2024-2-17 09:31 编辑 <br /><br /><pre class="iceCode:html">
<style>
#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t24/1/19u.jpeg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
display: grid;
place-items: center;
z-index: 1;
}
#lrc {
position: absolute;
top: 10px;
font: bold 2.4em sans-serif;
color: lightgreen;
text-shadow: 1px 1px 1px rgba(0,0,0,.45);
--ani: lrcGo1;
--duration: 1s;
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 100%;
height: 100%;
color: transparent;
background: repeating-radial-gradient(lightgreen, red, lightgreen 24px);
background-clip: text;
-webkit-background-clip: text;
clip-path: inset(0 100% 0 0);
animation: var(--ani) var(--duration) linear forwards var(--state);
border-bottom: 4px ridge lightgreen;
}
#btnplay {
position: absolute;
bottom: 10px;
width: 200px;
height: 200px;
animation: rotating 6s linear infinite var(--state);
cursor: pointer;
}
ye-zi {
position: absolute;
left: calc(50% - 0.5 * var(--ww));
top: 0;
width: var(--ww);
height: 100px;
border-radius: 0 100%;
background: repeating-radial-gradient(green, white, green 10%);
transform-origin: 50% 100%;
transform: rotate(var(--deg));
}
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
</style>

<div id="papa">
<audio src="https://music.163.com/song/media/outer/url?id=496815031 " autoplay loop></audio>
<div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
<div id="btnplay"></div>
</div>

<script>
var geci = [ , , ];
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc.js';
document.querySelector('body').appendChild(sF);
//按钮叶瓣 : 9
Array.from({length: all = 9}).forEach((item,key) => {
item = document.createElement('ye-zi');
item.style.cssText += `--ww: 30px; --deg: ${360 / all * key}deg;`;
btnplay.prepend(item);
});
</script>
</pre>

<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/icecode.js';
document.querySelector('body').appendChild(sF);
sF.onload = () => ice.code.light();
</script>

朵拉发表于 2024-2-17 09:26

首席沙发欣赏学习~~{:4_190:}

红影发表于 2024-2-17 09:38

这好，带歌词同步的，而且播放器按钮和歌词都是带条纹的，相映成趣{:4_199:}

红影发表于 2024-2-17 09:40

歌词的底色和下划线的颜色又是和按钮对应的，真是环环相扣呢{:4_187:}

红影发表于 2024-2-17 09:42

发现使用border-radius: 0 100%;正好能形成一个小小的按钮的空心，和歌名又是那么好的呼应{:4_173:}

红影发表于 2024-2-17 09:42

发现使用border-radius: 0 100%;正好能形成一个小小的按钮的空心，和歌名又是那么好的呼应{:4_173:}

红影发表于 2024-2-17 09:42

每天一个新效果，黑黑太厉害了{:4_199:}

红影发表于 2024-2-17 09:44

歌词很伤感呢，有点跪舔的感觉{:4_204:}

马黑黑 发表于 2024-2-17 11:55

红影发表于 2024-2-17 09:44
歌词很伤感呢，有点跪舔的感觉

我一直不太懂跪舔是啥意思

小辣椒 发表于 2024-2-17 14:56

黑黑现在的速度特别快，今天又有新的{:4_199:}

小辣椒 发表于 2024-2-17 15:02

先仔细看看。。。。

看看就这些代码，这个js可能也是就几行代码。居然有这么强大的功能，黑黑你太厉害了

功能：① 音频播放/暂停；② lrc歌词同步；③ 管理所有视频；④ 管理与CSS变量 --state
要求：① 播放按钮id : btnplay；② 歌词容器id : lrc

小辣椒 发表于 2024-2-17 15:03

这个也是可以套用，小辣椒懒人的福音{:4_170:}

千羽发表于 2024-2-17 18:10

黑黑老师又推出新作品了{:4_187:}

千羽发表于 2024-2-17 18:13

这背景图很壮观，左边是一羊头吗？，这个播放器好漂亮啊，背景音乐也挺好听的{:4_187:}

马黑黑 发表于 2024-2-17 19:23

千羽发表于 2024-2-17 18:10
黑黑老师又推出新作品了

{:4_191:}

马黑黑 发表于 2024-2-17 19:24

千羽发表于 2024-2-17 18:13
这背景图很壮观，左边是一羊头吗？，这个播放器好漂亮啊，背景音乐也挺好听的

这个需要想象{:4_170:}

马黑黑 发表于 2024-2-17 19:25

小辣椒发表于 2024-2-17 14:56
黑黑现在的速度特别快，今天又有新的

这个可以的吧{:4_203:}

马黑黑 发表于 2024-2-17 19:26

小辣椒发表于 2024-2-17 15:02
先仔细看看。。。。

看看就这些代码，这个js可能也是就几行代码。居然有这么强大的功能，黑黑你太厉害了 ...

JS模块压缩了，所以也就几行，但是每一行都比较长

马黑黑 发表于 2024-2-17 19:26

小辣椒发表于 2024-2-17 15:03
这个也是可以套用，小辣椒懒人的福音

歌词要制作一下

页: [1] 2 3 4 5 6 7

花潮论坛's Archiver

庆庆 ：空心

庆庆：空心