爱如风情如云 （套用玩个黑黑的粒子播放器）
<style>@import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.css?v=1.0';
#tz { margin: 130px 0 30px calc(50% - 721px); width: 1280px; height: 666px; background: url('https://cccimg.com/view.php/4d5c3ebf7ff508592158aa011b6c6c98.jpg') no-repeat center/cover; overflow: hidden; border-radius:32px; border: thick double DimGray; }
#xiaoqiu { width: 1200px; height: 150px; top: 68%; left: 3%; border-radius: 50%; position: absolute; }
#mplayer { width: 580px; bottom: 10px; background: none; box-shadow: none; color: snow; }
#mplayer img { filter: invert(.8); }
#prog { --prog: #cecfd4; }
#lrc { --bg: linear-gradient(180deg,hsla(80,50%,20%,.20),hsla(80,50%,20%,.35)); position: absolute; left: 40%; bottom: 80px;font:normal 1.6em Microsoft YaHei; sans-serif; color:MintCream; white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }
#fsbtn { top: 30px; left: 48%; }
.vid { opacity: 0.55; }
</style>
<div id="tz" class="pa">
<audio src="https://file.uhsea.com/2503/1d6b58ce8b94b3ef976de79f2e0851562B.mp3"></audio>
<video class="vid" src="https://cccimg.com/view.php/e852a0b5895bb1098f194b0058e25802.mp4" autoplay loop muted></video>
<div id="xiaoqiu"></div>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.js?v=1.0';
import { lz } from 'https://638183.freep.cn/638183/web/lizi/canvasparticles.js';
var gc = [
['0.00', '爱如风情如云 - 洋澜一',1.66],
['1.75', '词：小啊',1.66],
['3.50', '曲：走心音乐',1.66],
['5.25', '编曲：王亚东',1.66],
['7.00', '混音：王亚东',1.66],
['8.75', '吉他：LeoD',1.66],
['10.50', '和声：扁桃体不发言',1.66],
['12.25', '制作人：陈金文',1.66],
['14.00', 'OP：星汉马文化',1.66],
['15.75', '总是 一个人怀念像与你无关',6.84],
['22.95', '总是 如一件被丢角落的衣衫',6.84],
['30.15', '总是 风起波澜在失眠的夜晚',6.61],
['37.11', '总是 害怕孤单却沉溺在孤单',6.98],
['44.46', '总是 想一刀两断却藕断丝连',6.81],
['51.63', '总是 忘不掉一切反复的循环',6.78],
['58.77', '总是 哭红的双眼不想你看见',6.58],
['65.70', '总是说着违心的话把自己欺骗',7.10],
['73.17', '这爱如风情如云思念如尘烟',3.62],
['76.98', '一切消逝眼前',3.31],
['80.46', '再执念再眷恋在恍惚之间',3.31],
['83.94', '你看呐已时过境迁',3.36],
['87.48', '这爱如风情如云过往如碎片',3.59],
['91.26', '藏有太多遗憾',2.79],
['94.20', '我不管想念已成为习惯',3.13],
['97.50', '交给时间',17.67],
['116.10', '总是 想一刀两断却藕断丝连',6.81],
['123.27', '总是 忘不掉一切反复的循环',6.78],
['130.41', '总是 哭红的双眼不想你看见',6.61],
['137.37', '总是说着违心的话把自己欺骗',7.07],
['144.81', '这爱如风情如云思念如尘烟',3.62],
['148.62', '一切消逝眼前',3.31],
['152.10', '再执念再眷恋在恍惚之间',3.31],
['155.58', '你看呐已时过境迁',3.36],
['159.12', '这爱如风情如云过往如碎片',3.59],
['162.90', '藏有太多遗憾',2.82],
['165.87', '我不管想念已成为习惯',3.11],
['169.14', '交给时间',3.96],
['173.31', '这爱如风情如云思念如尘烟',3.76],
['177.27', '一切消逝眼前',3.33],
['180.78', '再执念再眷恋在恍惚之间',3.31],
['184.26', '你看呐已时过境迁',3.33],
['187.77', '这爱如风情如云过往如碎片',3.59],
['191.55', '藏有太多遗憾',2.82],
['194.52', '我不管想念已成为习惯',3.11],
['197.79', '交给时间',3.60],
['201.58', '☆谢谢欣赏☆',4.5]
];
hcplay(tz, null, gc);
var peizhi = {
total: 80, /* 粒子数 */
minSize: 3, /* 粒子最小尺寸 */
maxSize: 8, /* 粒子最大尺寸 */
color: '#999',/* 粒子颜色 */
};
lz(xiaoqiu, peizhi);
tz.onclick = () => xiaoqiu.click();
</script>
@红影
亲爱的，抄个作业，稍微自己修改了一下，基本就是你的{:4_170:} @马黑黑
黑黑今天仔细看了一下，有三个粒子效果的播放器作业没有完成了，直接抄个作业练习完成一个{:4_170:} 感谢黑黑源码分享，现在只能完成一个是一个了，最近有点忙没有时间玩 做了一个简单的图，然后就加了个播放器，把粒子数加了一点，改小了一点，不知道你们感觉效果怎么样，多提宝贵意见啊 问好！{:4_187:}欣赏小辣椒精美帖子，我也想套用玩一个！ 画面效果美极了。 很喜欢这张背景图，太酷了！歌曲也好听！{:4_187:} 不知能否套用得了。 精彩制作，点赞学习！
小辣椒 发表于 2025-3-14 23:00
@红影
亲爱的，抄个作业，稍微自己修改了一下，基本就是你的
亲爱的这个做得漂亮，把粒子平放最下面，而且选用的视频也如粒子一般，和粒子相互呼应，这个思路巧妙{:4_199:} 画面也漂亮，营造的意境和歌曲十分相符。
亲爱的做帖子很动脑筋，漂亮{:4_199:} 问好老师，欣赏了 好看好听，感谢分享 亦是金 发表于 2025-3-15 09:44
问好！欣赏小辣椒精美帖子，我也想套用玩一个！
前辈套用玩轻松一点，我就想轻松玩 梦油 发表于 2025-3-15 09:51
画面效果美极了。
学习梦油欣赏，谢谢梦油鼓励{:4_187:} 梦江南 发表于 2025-3-15 09:51
很喜欢这张背景图，太酷了！歌曲也好听！
谢谢阿姨欣赏，我主要想加浅色粒子就用了深颜色的背景图了，这个图非常简单就加了二个人物 梦江南 发表于 2025-3-15 09:52
不知能否套用得了。
直接换图片换你音乐就可以了，阿姨别太累 老谟深虑 发表于 2025-3-15 10:17
精彩制作，点赞学习！
问好老谟，谢谢欣赏{:4_187:} 红影 发表于 2025-3-15 10:18
亲爱的这个做得漂亮，把粒子平放最下面，而且选用的视频也如粒子一般，和粒子相互呼应，这个思路巧妙{:4_ ...
亲爱的是你做的漂亮，我是套用你的，就稍微修改了一下
页:
[1]
2