小辣椒 发表于 2024-12-6 20:13

南风知何意 （学习黑黑Discover播放器效果）

<style>
        @import 'https://638183.freep.cn/638183/web/mod/ellipse_lrc.css';
        #tz { --lzNum: 120; --lzRot: 100deg; --lzSize:6;   --lzBg: linear-gradient(45deg, Teal, green);   10;   margin: 140px 0 30px calc(50% - 801px); width:1440px; height: 731px; background: url('https://xlaj.cn/upfile/202412/06/14.jpg') no-repeat center/cover; }
            
        #mplayer { --prog: Green; --track: Silver; color: Green; width: 200px; height: 100px; bottom: 120px; }
         #mbtn::after { background: linear-gradient(30deg, tan,green); }        
         #lrc {bottom: 50px; left: 43%;font:normal 2.0em Microsoft YaHei;--bg: linear-gradient(rgba(138,43,226,.15),rgba(138,43,226,.25)); }
         
        #fsbtn { top:50px;}
         border-radius: 20%;
      border: 20px dotted #336699;
</style>

<div id="tz" class="pa">

        <audio id="aud" src="https://file.uhsea.com/2411/195dac780585325fb27914a76be6d056K3.mp3" autoplay loop></audio>

                <div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
        <div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/ellipse_lrc.js';
        import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';

var geci = [
        ['0.00', '学习黑黑Discover效果',4.28],
['9.51', '南风知何意',2.86],
['13.52', '编曲/作曲：潇梦临',4.86],
['18.53', '演唱：司夏',7.16],
['25.44', '闻君素来簪明月',2.71],
['28.29', '剑气尽杀满庭雪',4.26],
['32.77', '与我红尘无踪萍',2.66],
['35.57', '云泥自有别',4.78],
['40.60', '年少雨声斜',3.42],
['44.20', '南北共沾睫',2.38],
['46.70', '始发兰因',0.90],
['47.65', '同上亭前青石阶',7.12],
['55.14', '斗酒文章云袖叠',2.52],
['57.79', '如今思来梦中解',4.29],
['62.31', '分明旧日霜风猎',2.69],
['65.14', '却道未肯歇',4.73],
['70.12', '敢问当年月',3.09],
['73.37', '何照此时街',2.67],
['76.18', '是否怕我惊扰',2.30],
['78.60', '枝头一双鹊',4.47],
['83.30', '早知北地梅红',1.70],
['85.09', '江岭春浓',0.79],
['85.92', '不通时节',1.73],
['87.74', '不入同词阕',3.06],
['90.96', '虽有双双约',2.70],
['93.80', '难织双双结',3.90],
['97.91', '早知塞外鸿雁',1.68],
['99.68', '江南名帖',0.91],
['100.64', '分属两界',1.64],
['102.37', '难写作一列',3.15],
['105.69', '纵使未想别',2.70],
['108.53', '相逢始作别',4.88],
['113.67', '~Music~',14.53],
['128.97', '起初未信缘字劫',2.51],
['131.61', '笃定余生花不谢',4.28],
['136.12', '谁知大抵动情者',2.68],
['138.94', '先勇而后怯',4.40],
['143.57', '越非同路人',3.68],
['147.44', '越是念念难戒',2.37],
['149.93', '平生皎洁尽付',2.24],
['152.29', '初见那一瞥',4.41],
['156.93', '早知北地梅红',1.84],
['158.87', '江岭春浓',0.81],
['159.72', '不通时节',1.66],
['161.47', '不入同词阕',3.08],
['164.71', '虽有双双约',2.65],
['167.50', '难织双双结',3.93],
['171.64', '早知塞外鸿雁',1.75],
['173.48', '江南名帖',0.87],
['174.40', '分属两界',1.66],
['176.15', '难写作一列',3.17],
['179.49', '纵使未想别',2.61],
['182.24', '相逢始作别',4.07],
['186.52', '早知山中风平',1.70],
['188.31', '碧海潮起',0.82],
['189.17', '偶然梦中',1.70],
['190.96', '曾片刻相携',3.14],
['194.27', '写就同一篇',2.60],
['197.01', '散落各章节',3.94],
['201.16', '于是万般夙愿',1.81],
['203.06', '万般痛惜',0.85],
['203.95', '光阴批阅',1.69],
['205.73', '寥寥只剩略',3.08],
['208.97', '天涯共长夜',2.71],
['211.82', '各自吹灯灭',4.82],
['216.89', '☆谢谢欣赏☆',4.5]
];

        hcplay(tz, geci);
        fscreen.fs(tz, fsbtn);
</script>

梦油 发表于 2024-12-6 20:16

陆续冒出来的小球球给整个画面带来了生气。

小辣椒 发表于 2024-12-6 20:16

@马黑黑
学习做一个Discover播放器效果，发现播放器按钮变色，想粒子变色，因为画面是深緑多，就改了緑的，但底色是淡緑想修改红的，没有成功

小辣椒 发表于 2024-12-6 20:18

梦油 发表于 2024-12-6 20:16
陆续冒出来的小球球给整个画面带来了生气。

梦油晚上好，速度的，我还在写留言的{:4_173:}

小辣椒 发表于 2024-12-6 20:18

梦油 发表于 2024-12-6 20:16
陆续冒出来的小球球给整个画面带来了生气。

谢谢梦油欣赏和支持{:4_187:}

马黑黑 发表于 2024-12-6 20:52

小辣椒 发表于 2024-12-6 20:16
@马黑黑
学习做一个Discover播放器效果，发现播放器按钮变色，想粒子变色，因为画面是深緑多，就改了緑的 ...

你可以使用渐变：--lzBg: linear-gradient(45deg, red, green);

红影 发表于 2024-12-6 20:54

这个画面淡雅，歌词同步的颜色设置也好。欣赏亲爱的好帖{:4_199:}

红影 发表于 2024-12-6 20:55

现在的粒子颜色也很漂亮啊{:4_173:}

小辣椒 发表于 2024-12-6 20:57

马黑黑 发表于 2024-12-6 20:52
你可以使用渐变：--lzBg: linear-gradient(45deg, red, green);

我去测试一下，我想出来看见的颜色和画面一样的

小辣椒 发表于 2024-12-6 21:02

马黑黑 发表于 2024-12-6 20:52
你可以使用渐变：--lzBg: linear-gradient(45deg, red, green);

黑黑，这个我昨天测试过的，我想出来直接是深緑，但按钮点击出来红的，这个粒子也是红的，但不会改

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

小辣椒 发表于 2024-12-6 21:02
黑黑，这个我昨天测试过的，我想出来直接是深緑，但按钮点击出来红的，这个粒子也是红的，但不会改

鼠标移动到播放器界面是颜色会转换

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

小辣椒 发表于 2024-12-6 20:57
我去测试一下，我想出来看见的颜色和画面一样的

不会一样的。修改后你要硬刷新。

小辣椒 发表于 2024-12-6 21:05

红影 发表于 2024-12-6 20:54
这个画面淡雅，歌词同步的颜色设置也好。欣赏亲爱的好帖

亲爱的，这个也是看了配置说明才完成的作业

小辣椒 发表于 2024-12-6 21:06

红影 发表于 2024-12-6 20:55
现在的粒子颜色也很漂亮啊

是的，我就想同色系的用了深緑的颜色

小辣椒 发表于 2024-12-6 21:10

马黑黑 发表于 2024-12-6 21:05
不会一样的。修改后你要硬刷新。
和昨天一样，出来不是纯深緑了，我是想出来是深緑，鼠标点击按钮再变红的


现在改这个这个颜色，出来可以明显变色了

--lzBg: linear-gradient(45deg, LimeGreen, green);

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

小辣椒 发表于 2024-12-6 21:10
和昨天一样，出来不是纯深緑了，我是想出来是深緑，鼠标点击按钮再变红的

额，你可以直接在css代码中加一个 .lz 选择器：

.lz { background: darkgreen; }

这是直接设置了背景色，覆盖引入的CSS资源文档的设置

小辣椒 发表于 2024-12-6 21:20

马黑黑 发表于 2024-12-6 21:18
额，你可以直接在css代码中加一个 .lz 选择器：

.lz { background: darkgreen; }

现在的看看 没有加的变色了，就是颜色不是深緑

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

小辣椒 发表于 2024-12-6 21:20
现在的看看 没有加的变色了，就是颜色不是深緑

是什么颜色自己加，比如你试一下黄色、金色什么的，别的颜色能加，你要的颜色也就能加

小辣椒 发表于 2024-12-6 21:34

马黑黑 发表于 2024-12-6 21:28
是什么颜色自己加，比如你试一下黄色、金色什么的，别的颜色能加，你要的颜色也就能加

试了，这个比较合适

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

小辣椒 发表于 2024-12-6 21:34
试了，这个比较合适

是的，比先前的鲜亮不少，更好看的
页: [1] 2 3
查看完整版本: 南风知何意 （学习黑黑Discover播放器效果）