失色天空

马黑黑

马黑黑

帖子代码：

1. <style>
   
2.         #tz { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: 1024px; height: 576px; background: url('https://638183.freep.cn/638183/t24/2/ustk.gif') no-repeat center/cover; overflow: hidden; z-index: 1; box-shadow: 2px 2px 3px gray; position: relative; }
   
3.         #tz::before { content: attr(data-lrc); position: absolute; top: 10px; width: 100%; height: 60px; font: bold 32px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to right, silver, tan, white, tan, silver) 50%/200px 60px; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px #333); text-align: center; }
   
4.         #player { position: absolute; left: 320px; top: 290px; width: 80px; height: 80px; border-radius: 50%; background: lightblue; box-shadow: inset 0 0 6px white, 0 0 18px purple; cursor: pointer; opacity: .5; transition: 1s; animation: rot 6s linear infinite var(--state); }
   
5.         #player::after { position: absolute; content: ''; left: calc(50% - 10px); top: calc(50% - 10px); width: 20px; height: 20px; border-radius: 50%; background: olive; }
   
6.         #player:hover { width: 90px; height: 90px; }
   
7.         .vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: overlay; }
   
8.         @keyframes rot { to { transform: rotate(360deg); } }
   
9. </style>
   
10. 
    
11. <div id="tz" data-lrc="HUACHAO">
    
12.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2024855424" autoplay loop></audio>
    
13.         <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b491dd2b9164.mp4" autoplay loop muted></video>
    
14.         <div id="player" title="播放/暂停"></div>
    
15. </div>
    
16. 
    
17. <script>
    
18. var sf = document.createElement('script');
    
19. sf.charset = 'utf-8';
    
20. sf.src = 'https://638183.freep.cn/638183/web/js/yslrc.js';
    
21. document.body.appendChild(sf);
    
22. player.style.backgroundImage = 'conic-gradient(' + 'cyan,tan,gold,transparent,teal,'.repeat(15).slice(0, -1) + ')';
    
23. var lrc = `[00:00:00]王理文 - 失色天空\n[00:20.342]回忆的余波 慢慢汹涌成 漩涡\n[00:24.601]深夜卷着我 不停坠落\n[00:28.852]多久才罢手呢 难以预测\n[00:37.591]你当然有权 保持沉默\n[00:41.843]可我连陈述 来不及说\n[00:47.087]就被你 宣判为 过客\n[00:53.104]你离开之后 心空空的\n[00:55.845]天空也 灰蒙蒙的\n[00:58.098]爱总是 太匆匆的\n[01:00.341]就让我 束手无策\n[01:02.596]你只说 不适合 不值得 别再招惹\n[01:06.837]未免有些太过欠妥\n[01:10.602]你离开之后 心空空的\n[01:13.339]眼睛也 灰蒙蒙的\n[01:15.594]世界好像失去颜色\n[01:19.597]可寂寞 却填满我的生活\n[01:43.100]回忆的余波 慢慢汹涌成 漩涡\n[01:47.856]深夜卷着我 不停坠落\n[01:52.091]多久才罢手呢 难以预测\n[01:59.598]你当然有权 保持沉默\n[02:04.847]可我连陈述 来不及说\n[02:10.096]就被你 宣判为 过客\n[02:16.102]你离开之后 心空空的\n[02:18.855]天空也 灰蒙蒙的\n[02:20.852]爱总是 太匆匆的\n[02:23.100]就让我 束手无策\n[02:25.348]你只说 不适合 不值得 别再招惹\n[02:29.590]未免有些太过欠妥\n[02:33.600]你离开之后 心空空的\n[02:36.091]眼睛也 灰蒙蒙的\n[02:38.343]世界好像失去颜色\n[02:42.592]可寂寞 却填满我的生活\n[02:50.854]你离开之后 心空空的\n[02:53.593]天空也 灰蒙蒙的\n[02:55.844]爱总是 太匆匆的\n[02:57.852]就让我 束手无策\n[03:00.093]你只说 不适合 不值得 别再招惹\n[03:04.584]未免有些太过欠妥\n[03:08.338]你离开之后 心空空的\n[03:11.086]眼睛也 灰蒙蒙的\n[03:13.339]世界好像失去颜色\n[03:17.335]可寂寞 却填满我的生活`;
    
24. </script>

复制代码

（此代码为原生lrc简单JS封装应用实例）

南无月

封装实例贴。。
瞧了半天，没找到小播怎么呈现出这样的波浪起伏状放射渐变。。
原来是这里设置的。。
player.style.backgroundImage = 'conic-gradient(' + 'cyan,red,gold,transparent,teal,'.repeat(15).slice(0, -1) + ')';

南无月

背景是一张GIF动画，跟天空融合的太漂亮了。画面温馨浪漫。。。歌曲好听。

马黑黑

南无月 发表于 2024-6-21 12:49
背景是一张GIF动画，跟天空融合的太漂亮了。画面温馨浪漫。。。歌曲好听。

马黑黑

南无月 发表于 2024-6-21 12:46
封装实例贴。。
瞧了半天，没找到小播怎么呈现出这样的波浪起伏状放射渐变。。
原来是这里设置的。。

角向渐变，又叫锥形渐变：

background: conic-gradient(red, green, blue);

默认渐变的出发点在元素的中心。

可以堆叠颜色，建议有规律堆叠，酱紫可以构造一定形态的图案，看怎么设置了。堆叠颜色是一件麻小烦的事情，所以使用JS的repeat方法快捷完成：

'&#10048;'.repeat(100);

这将 &#10048; 字符复制一百份。

但帖子里复制的是颜色，两个颜色之间有逗号，而渐变语句最后一个逗号不能要，所以又用 slice 方法去掉最后一个字符。

然后，就是字符串拼接，它实际上是一个长长的锥形渐变语句。

梦江南

欣赏老师的新作---失色天空！

最美的诗意

好听至极！！

南无月

马黑黑 发表于 2024-6-21 12:51

这么美妙的天空下，抽支烟，看着挺惬意

南无月

马黑黑 发表于 2024-6-21 12:59
角向渐变，又叫锥形渐变：

background: conic-gradient(red, green, blue);

叫锥形渐变，这个名字比较好记。。
周末认识一下新的渐变，
老师设置的这个堆叠就十分好看，
特别 是放大一些，
看上去跟丝绸似的轻盈有光泽

马黑黑

南无月 发表于 2024-6-21 18:09
叫锥形渐变，这个名字比较好记。。
周末认识一下新的渐变，
老师设置的这个堆叠就十分好看，

还可以加上角度值，做个饼状图

conic-gradient(red 0deg, blue 90deg, green 180deg);

马黑黑

南无月 发表于 2024-6-21 18:07
这么美妙的天空下，抽支烟，看着挺惬意

挺不错的

马黑黑

最美的诗意 发表于 2024-6-21 16:37
好听至极！！

下午好

马黑黑

梦江南 发表于 2024-6-21 13:46
欣赏老师的新作---失色天空！

南无月

马黑黑 发表于 2024-6-21 18:27
挺不错的

不错那就敢情好。

南无月

马黑黑 发表于 2024-6-21 18:27
还可以加上角度值，做个饼状图

conic-gradient(red 0deg, blue 90deg, green 180deg);

居然还可以加不同角度，这个感觉十分美妙。。转盘可以有了

绿叶清舟

这个播放器可以变个色假装碟片了

马黑黑

绿叶清舟 发表于 2024-6-21 20:51
这个播放器可以变个色假装碟片了

可以的吧

梦油

少女那飘动的头发很有生活的气息，赞！

马黑黑

南无月 发表于 2024-6-21 20:29
居然还可以加不同角度，这个感觉十分美妙。。转盘可以有了

可以的