文字效果集中营

马黑黑 · 发表于 2022-3-13 15:34

红影发表于 2022-3-13 14:10
我也在本地测试了一下，感觉差不多啊。

那是我摆弄的不好。这个网上有例子的，我只是坚决不看，看看我自己弄的咋样

马黑黑 · 发表于 2022-3-13 15:37

红影发表于 2022-3-13 14:07
这个才是真的逐字打字吧，不过和前面的14楼从效果上看差不多呢，虽然语句不同。

实现方式不同

马黑黑 · 发表于 2022-3-13 15:38

红影发表于 2022-3-13 14:00
也是一致的啊，但效果完全不行。你这里面的这个太漂亮了

不同颜色，渐变色也要配套一下吧

马黑黑 · 发表于 2022-3-13 15:39

红影发表于 2022-3-13 13:57
这些我都本地机上试了一下，发现还是你调配好的好看，有些我换一下颜色，效果就差很多。黑黑辛苦了{:4_18 ...

颜色调配只有多试，没什么好的方法

马黑黑 · 发表于 2022-3-13 15:47

本帖最后由马黑黑于 2022-3-13 16:06 编辑

试一个svg心形的文本效果。心形路径使用机器生成，机器就是强大哈，给出的小数点长达五位。PS也可以生成svg路径，具体操作方法我不知道，因为我不会PS也没安装PS，据说需要一个插件还是脚本就可。外话，不多说，看效果（本地测试文本刚好可以闭合）：

代码很简单（path路径的d属性除外，机器语言一般：

<textPath xlink:href="#heart">=====殊=====红笺小字说尽平生意鸿雁在云鱼在水惆怅此情难寄斜阳独倚西楼遥山恰对帘钩人面不知何处绿波依旧东流此为怀人之作=====晏=====</textPath>

</text>

</svg>

</div>

马黑黑 · 发表于 2022-3-13 16:09

本帖最后由马黑黑于 2022-3-13 16:22 编辑

原生JS文本轮番显示

马黑黑 · 发表于 2022-3-13 16:49

126#，随机轮番输出文本，应用场景还是挺广泛的。这个示例不难理解：

<p>原生JS文本轮番显示<br><br></p>

<div id="tDiv" style="color: green; font-family:'微软雅黑','黑体'; font-size: 4em; text-shadow: 1px 1px 1px #000, 2px 2px 3px darkgreen;"></div>

<script language="javascript">

var tipAr = ["空山新雨後", "天氣晚來秋", "明月松間照", "清泉石上流", "竹喧歸浣女", "蓮動下漁舟", "隨意春芳歇", "王孫自可留"];
var tDiv = document.getElementById("tDiv");
tDiv.innerHTML = "JS随机轮番显示文本";
var showTip = setInterval(outTip, 2000);

function outTip(){
var tNum = Math.floor(Math.random() * tipAr.length);
tDiv.innerHTML = tipAr[tNum];
};

</script>

先说下HTML代码部分：文本效果还是利用 text-shadow 来实现，这里，我设计了双重阴影，前面一个阴影用黑色，一个像素，后面的阴影是墨绿色，加大像素，这样营造出来的效果是文本好像都是绿色的，可又有那么一点点立体感。

总说说JS部分。JS部分原本我是一气呵成的，而且最初的草稿没有HTML代码，一切在JS中完成，可是水土不服，论坛对发帖用户的权限里头不支持对body的追加元素权限，所以还得是得用上div盒子。

JS代码中：

先创建一个数组，这个数组装载欲输出的系列文本。

接着获取文本输出的div盒子操作句柄。并给它首次输出的文字（这个输出也可以在HTML中完成）。

接着启动定时器，让它每隔2秒（2000毫秒）执行一次outTip()函数。

outTip()函数很简单：首先获得一个从 0 到文本数组长度个随机数，这个随机数用 Math.floor 方法取值，叫向下取值（floor是地板的意思），这样，实践上取得的值是 0 开始到（文本数组长度 - 1）个随机数，恰好符合读取数组的数值范围，因为，Math.random() * tipAr.length 方法得到的随机数最小可能是零点几，最大可能是（文本数组长度 -1 ）点几。其次，读取文本数组第随机数个下标并输出到盒子中。

关于随机数，再距离说明，以便能更直观理解：

Math.random() 方法获取随机数，假设我们乘以10，Math.random() * 10，将会得出 0 - 9.999...的浮点数，不会得到10。例子中随机数是获取数组的下标，不能有小数点，所以用 Math.floor 方法来处理，这是向下取整数的方法，它的对应方法即向上取整是 Math.ceil()，ceil是天花板的意思。