一个人的聚会（烟花封装演示）
本帖最后由 马黑黑 于 2024-5-5 08:43 编辑 <br /><br /><style>#papa { margin: 20px 0 20px calc(50% - 593px); width: 1024px; height: 640px; background: lightblue; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; }
#canv { position: absolute; mix-blend-mode: screen; }
#player { position: absolute; bottom: 20px; left: calc(50% - 60px); width: 120px; cursor: pointer; animation: rot 5s linear infinite var(--state); }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1391274529" autoplay></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bc0dd9681b.mp4" loop muted></video>
<canvas id="canv" width="1024" height="300"></canvas>
<img id="player" src="https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png" alt="" />
</div>
<script>
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/js/fireframes.js';
sF.charset = 'utf-8';
document.body.appendChild(sF);
var pa = papa, lz = 80, flash = false;
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
本帖最后由 马黑黑 于 2024-5-5 08:38 编辑 <br /><br /><style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>帖子代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #papa { <span class="tBlue">margin:</span> 20px 0 20px calc(50% - 593px); <span class="tBlue">width:</span> 1024px; <span class="tBlue">height:</span> 640px; <span class="tBlue">background:</span> lightblue; <span class="tBlue">box-shadow:</span> 3px 3px 6px gray; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">z-index:</span> 1; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"> #canv { <span class="tBlue">position:</span> absolute; <span class="tBlue">mix-blend-mode:</span> screen; }</cl-cd>
<cl-cd data-idx="4"> #player { <span class="tBlue">position:</span> absolute; <span class="tBlue">bottom:</span> 20px; <span class="tBlue">left:</span> calc(50% - 60px); <span class="tBlue">width:</span> 120px; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">animation:</span> rot 5s linear infinite <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="5"> .vid { <span class="tBlue">position:</span> absolute; <span class="tBlue">bottom:</span> 0; <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> calc(100% + 60px); <span class="tBlue">object-fit:</span> cover; }</cl-cd>
<cl-cd data-idx="6"> @keyframes rot { to { <span class="tBlue">transform:</span> rotate(1turn); } }</cl-cd>
<cl-cd data-idx="7"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="8"> </cl-cd>
<cl-cd data-idx="9"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="10"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=1391274529"</span> autoplay><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="11"> <<span class="tDarkRed">video</span> class=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bc0dd9681b.mp4"</span> loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="12"> <<span class="tDarkRed">canvas</span> <span class="tRed">id</span>=<span class="tMagenta">"canv"</span> width=<span class="tMagenta">"1024"</span> height=<span class="tMagenta">"300"</span>><<span class="tDarkRed">/canvas</span>></cl-cd>
<cl-cd data-idx="13"> <<span class="tDarkRed">img</span> <span class="tRed">id</span>=<span class="tMagenta">"player"</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png"</span> alt=<span class="tMagenta">""</span> /></cl-cd>
<cl-cd data-idx="14"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="15"> </cl-cd>
<cl-cd data-idx="16"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">var</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="18"> sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/js/fireframes.js'</span>;</cl-cd>
<cl-cd data-idx="19"> sF.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="20"> <span class="tRed">document</span>.body.appendChild(sF);</cl-cd>
<cl-cd data-idx="21"> <span class="tGreen">/* 配置烟花 ：pa 指定帖子容器<span class="tRed">id</span>；lz 单朵烟花粒子数；<span class="tBlue">flash:</span> 烟花动画开关 */</span></cl-cd>
<cl-cd data-idx="22"> <span class="tBlue">var</span> pa = papa, lz = 80, flash = true;</cl-cd>
<cl-cd data-idx="23"> player.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="24"><<span class="tDarkRed">/script</span>></cl-cd>
</div> 本帖最后由 马黑黑 于 2024-5-5 09:59 编辑
约定及相关说明：
（一）帖子容器需要操作标识，如果是 id，例如 id="papa"，在配置烟花时直接给出 pa = papa 即可，若是 class="mama" 之类的，需要先获得容器操作标识再配置，示例如下：
var mama = document.querySelector('.mama');
var pa = mama, lz = 50, flash = true;
（二）audio 音频标签需要 id="aud"、canvas画布标签需要 id="canv"，重度依赖；video 视频标签需要 class="vid"，联动操作视频需要。
（三）canvas画布可单独设置位置（通过CSS操作）、设定宽高尺寸（通过HTML操作）。
（四）烟花配置参数，pa 变量的赋值必须符合帖子容器标识；lz 变量是单朵烟花的粒子数，建议取值范围在50~100之间；flash 变量值为 true、false，二选一（选 true，开始时的动画速度偏快，点击过暂停播放按钮后恢复正常速度；选false，动画播放速度正常）。 烟花的形态多种多样，这里，fireframs.js 仅封装其中一种，就是我们过去曾经用过的那一种 好 美！先生，早！ 动感十足，好漂亮！ 这个直接用视频做背景了，下面飘拂的粒子和烟花粒子相互呼应，好美的效果啊{:4_199:} lz 单朵烟花粒子数；这个也能配置的呢，有趣。这里配置的80正好，不多不少{:4_199:} 听不懂的歌词，去搜了一下，是维语的，买吾兰 买买提明用他那略显沙哑的嗓子，唱一个男人的心酸和孤独。
《一个人的聚会》
空虚茶杯已足以，
想象那是美酒一杯。
此刻知己四面墙壁，
都塔尔使我宿醉安慰。
我在弹琴小心翼翼，
隔壁的令居暗暗听取。
收吧世界一切给你，
只盼留下我孤独音律。
琴是情人琴是宿醉
远离我吧让我孤身。
哪怕愁肠或是贫困，
都是爱恋或是幽情。
只需知音他人无求，
都塔尔知心与我谈心。
忘记世界忘记所有，
只在曲中才无忧愁。
木琴与我同那贵宾，
无需互捧彼此夸赞。
荣华富贵无需追随，
生命真谛在于平淡。
琴是情人琴是宿醉
远离我吧让我孤身。
哪怕愁肠或是贫困，
都是爱恋或是幽情。。 转：
人生最大的遗憾莫过于遇到一个特别的人，却永远不能在一起，或早或晚都得放弃，最让人心酸的是，得不到，又舍不得”# 满满都是回忆，你感受到了吗？
这首歌让我想到当年刚出来挣钱一个两块钱的馕吃两天的时候……
喜欢，一个人静静的听的音乐。想知道伴奏的是什么乐器？（都塔尔）
时隔两年再听这首歌，莫名的有了不同的感觉，就好像是在大漠中一个人在用歌曲诉说着什么，当音符彻底消散在无边的沙丘中，最后一抹落日的余晖隐匿于漫天的黄沙，突然刮来一阵凛冽的风，沙砾模糊了我的眼，等我再睁开眼，那个人已经走远了，没有一个郑重的告别。
以此曲:一个人的聚会～为背景音乐无限循环；泡一壶老树普洱，点燃一支香烟…昨天的欢笑与悲伤，今天的无奈与困惑，能够预见的明天…知足，才能无忧；无忧，才能心静；心静，才能有深度的体验与感悟；人生如此而已 听得入迷了。。。 本来对新疆有点怕的，大学时候有个新疆同学，很野，总打架，才1年多就被退学了，让我感觉那的地方挺可怕。甚至都没记住那个同学的名字。听到这么美的歌声，很想有机会时去那个地方转转，体验一下不同的民族风情。 红影 发表于 2024-5-5 10:00
本来对新疆有点怕的，大学时候有个新疆同学，很野，总打架，才1年多就被退学了，让我感觉那的地方挺可怕。 ...
新疆是个美丽的地方。那里最大的特点是天宽地宽，这可愁死了快递公司。那里的人不仅文明善良，还多才多艺、能吃苦耐劳、热爱生活。刀郎是俺们四川人，但刀郎的成功很大程度上与新疆有着紧密的联系，这得益于新疆的人杰地灵。
每一个地区都会有特能闹腾的人存在，你的童鞋不能成为对新疆或新疆人产生不良印象印象的依据。 红影 发表于 2024-5-5 09:50
听得入迷了。。。
略带悲凉的歌一般都会容易打动人 红影 发表于 2024-5-5 09:50
转：
人生最大的遗憾莫过于遇到一个特别的人，却永远不能在一起，或早或晚都得放弃，最让人心酸的是，得 ...
{:4_187:} 红影 发表于 2024-5-5 09:42
听不懂的歌词，去搜了一下，是维语的，买吾兰 买买提明用他那略显沙哑的嗓子，唱一个男人的心酸和孤独。
...
辛苦了{:4_190:} 小文 发表于 2024-5-5 09:04
好 美！先生，早！
上午好 梦油 发表于 2024-5-5 09:25
动感十足，好漂亮！
早上好 红影 发表于 2024-5-5 09:34
lz 单朵烟花粒子数；这个也能配置的呢，有趣。这里配置的80正好，不多不少
{:4_191:} 红影 发表于 2024-5-5 09:33
这个直接用视频做背景了，下面飘拂的粒子和烟花粒子相互呼应，好美的效果啊
挺不错的吧