字写的不好看
<div id="papa" style="min-height: 300px"></div><script>
var sc = document.createElement('script');
sc.charset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js/lzwz.js';
document.body.appendChild(sc);
var wz = {papa: '#papa', text: '花潮论坛欢迎您',color: 'red'};
</script> 本帖最后由 马黑黑 于 2024-4-25 21:29 编辑 <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">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span> style=<span class="tMagenta">"<span class="tBlue">min-height:</span> 300px"</span>><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="2"> </cl-cd>
<cl-cd data-idx="3"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="4"> <span class="tBlue">var</span> sc = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="5"> sc.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="6"> sc.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/js/lzwz.js'</span>;</cl-cd>
<cl-cd data-idx="7"> <span class="tRed">document</span>.body.appendChild(sc);</cl-cd>
<cl-cd data-idx="8"> <span class="tBlue">var</span> wz = {<span class="tBlue">papa:</span> <span class="tMagenta">'#papa'</span>, <span class="tBlue">text:</span> <span class="tMagenta">'花潮论坛欢迎您'</span>, <span class="tBlue">color:</span> <span class="tMagenta">'red'</span>};</cl-cd>
<cl-cd data-idx="9"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
本帖最后由 马黑黑 于 2024-4-25 21:37 编辑
wz 变量配置说明：
wz = {
papa: '#papa', /* 文字容器 必须*/
text: '花潮论坛欢迎您', /* 要输出的文本 必须，文字不宜过多*/
left: '10px', /* 左定位 缺省或空值默认 10px */
top: '10px', /* 右定位缺省或空值默认 10px */
color: 'red' /* 前景色 缺省或空值使用随机色 */
};
【注意】所有键值均使用小角引号包裹，各键值对之间用小角逗号隔开，可以写成一行。使用时不要注释。
这个还是动态的字呢，漂亮{:4_199:} 又是一个封装好的效果呢，很赞{:4_199:} 红影 发表于 2024-4-25 22:35
这个还是动态的字呢，漂亮
JS还没有完全弄好，是个初稿，参考了大佬的一个分享 红影 发表于 2024-4-25 22:36
又是一个封装好的效果呢，很赞
还没完全弄好的，还需要测试再定稿 这几个字设计的有新意。 这个真是太漂亮了。。
粒子是动态的，如流水一般。。。
字的形状却清晰易辨。。。 玩了一会，
换了颜色和字，透明度。
字的大小好象不能更换。。。{:4_199:} 一楼这几个字这些粒子看着像是掉落的花瓣堆起来的一样。。
跟《遇见》贴子里的效果不一样。。各有妙处。
{:4_173:}
南无月 发表于 2024-4-26 11:01
一楼这几个字这些粒子看着像是掉落的花瓣堆起来的一样。。
跟《遇见》贴子里的效果不一样。。各有妙处。
...
颜色、背景共同作用的效果 南无月 发表于 2024-4-26 10:57
玩了一会，
换了颜色和字，透明度。
字的大小好象不能更换。。。
font-size 已经固定为 100px，不能改 南无月 发表于 2024-4-26 10:49
这个真是太漂亮了。。
粒子是动态的，如流水一般。。。
字的形状却清晰易辨。。。
{:4_191:} 梦油 发表于 2024-4-26 08:13
这几个字设计的有新意。
{:4_180:} 马黑黑 发表于 2024-4-26 11:55
谢谢你的香茶。 马黑黑 发表于 2024-4-25 22:36
JS还没有完全弄好，是个初稿，参考了大佬的一个分享
虽然是初稿但现在看着很好啊，没感觉有什么问题呢{:4_187:} 马黑黑 发表于 2024-4-25 22:39
还没完全弄好的，还需要测试再定稿
定稿了也收到文字仓库里呗，这个特别漂亮呢{:4_199:} 马黑黑 发表于 2024-4-26 11:55
这个效果是真好看呀，字跟活了一样{:4_173:} 马黑黑 发表于 2024-4-26 11:55
font-size 已经固定为 100px，不能改
还好，你给的改大小的方法，已尝试更改成功。。{:4_199:}