失色天空

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

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

帖子代码：
<style>
#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; }
#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; }
#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); }
#player::after { position: absolute; content: ''; left: calc(50% - 10px); top: calc(50% - 10px); width: 20px; height: 20px; border-radius: 50%; background: olive; }
#player:hover { width: 90px; height: 90px; }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: overlay; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="tz" data-lrc="HUACHAO">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2024855424" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b491dd2b9164.mp4" autoplay loop muted></video>
<div id="player" title="播放/暂停"></div>
</div>

<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js/yslrc.js';
document.body.appendChild(sf);
player.style.backgroundImage = 'conic-gradient(' + 'cyan,tan,gold,transparent,teal,'.repeat(15).slice(0, -1) + ')';
var lrc = `王理文 - 失色天空\n回忆的余波慢慢汹涌成漩涡\n深夜卷着我不停坠落\n多久才罢手呢难以预测\n你当然有权保持沉默\n可我连陈述来不及说\n就被你宣判为过客\n你离开之后心空空的\n天空也灰蒙蒙的\n爱总是太匆匆的\n就让我束手无策\n你只说不适合不值得别再招惹\n未免有些太过欠妥\n你离开之后心空空的\n眼睛也灰蒙蒙的\n世界好像失去颜色\n可寂寞却填满我的生活\n回忆的余波慢慢汹涌成漩涡\n深夜卷着我不停坠落\n多久才罢手呢难以预测\n你当然有权保持沉默\n可我连陈述来不及说\n就被你宣判为过客\n你离开之后心空空的\n天空也灰蒙蒙的\n爱总是太匆匆的\n就让我束手无策\n你只说不适合不值得别再招惹\n未免有些太过欠妥\n你离开之后心空空的\n眼睛也灰蒙蒙的\n世界好像失去颜色\n可寂寞却填满我的生活\n你离开之后心空空的\n天空也灰蒙蒙的\n爱总是太匆匆的\n就让我束手无策\n你只说不适合不值得别再招惹\n未免有些太过欠妥\n你离开之后心空空的\n眼睛也灰蒙蒙的\n世界好像失去颜色\n可寂寞却填满我的生活`;
</script>（此代码为原生lrc简单JS封装应用实例）

南无月 发表于 2024-6-21 12:46

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

南无月 发表于 2024-6-21 12:49

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

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

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

{:5_104:}

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

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

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

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

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

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

'❀'.repeat(100);

这将 ❀ 字符复制一百份。

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

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

梦江南 发表于 2024-6-21 13:46

欣赏老师的新作---失色天空！{:4_199:}

最美的诗意 发表于 2024-6-21 16:37

好听至极！！

南无月 发表于 2024-6-21 18:07

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

这么美妙的天空下，抽支烟，看着挺惬意{:4_170:}

南无月 发表于 2024-6-21 18:09

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

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

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

马黑黑 发表于 2024-6-21 18:27

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

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

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

马黑黑 发表于 2024-6-21 18:27

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

挺不错的

马黑黑 发表于 2024-6-21 18:28

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

下午好

马黑黑 发表于 2024-6-21 18:28

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

{:4_190:}

南无月 发表于 2024-6-21 20:28

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

{:4_173:}不错那就敢情好。

南无月 发表于 2024-6-21 20:29

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

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

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

绿叶清舟 发表于 2024-6-21 20:51

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

马黑黑 发表于 2024-6-21 21:17

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

可以的吧

梦油发表于 2024-6-21 21:24

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

马黑黑 发表于 2024-6-21 21:26

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

可以的

页: [1] 2 3 4 5

花潮论坛's Archiver

失色天空