红影 发表于 2022-3-13 14:10
我也在本地测试了一下，感觉差不多啊。
那是我摆弄的不好。这个网上有例子的，我只是坚决不看，看看我自己弄的咋样
红影 发表于 2022-3-13 14:07
这个才是真的逐字打字吧，不过和前面的14楼从效果上看差不多呢，虽然语句不同。
实现方式不同
红影 发表于 2022-3-13 14:00
也是一致的啊，但效果完全不行。你这里面的这个太漂亮了
不同颜色，渐变色也要配套一下吧
红影 发表于 2022-3-13 13:57
这些我都本地机上试了一下，发现还是你调配好的好看，有些我换一下颜色，效果就差很多。黑黑辛苦了{:4_18 ...
颜色调配只有多试，没什么好的方法
本帖最后由 马黑黑 于 2022-3-13 16:06 编辑 <br /><br /><p>试一个svg心形的文本效果。心形路径使用机器生成，机器就是强大哈，给出的小数点长达五位。PS也可以生成svg路径，具体操作方法我不知道，因为我不会PS也没安装PS，据说需要一个插件还是脚本就可。外话，不多说，看效果（本地测试文本刚好可以闭合）：</p>
<div style="margin: 0 auto; width: 420px; height: 420px;">
<svg width="420" height="420">
<path fill="none" style="font-family:'微软雅黑','黑体'; font-size: 1em; display: block; overflow: visible;" id="heart" d="m209.22025,177.86839c62.46273,-161.83824 307.19374,0 0,208.07773c-307.19374,-208.07773 -62.46273,-369.91597 0,-208.07773z"></path>
<text stroke="red">
<textPath xlink:href="#heart">=====殊=====红笺小字 说尽平生意 鸿雁在云鱼在水 惆怅此情难寄 斜阳独倚西楼 遥山恰对帘钩 人面不知何处 绿波依旧东流 此为怀人之作=====晏=====</textPath>
</text>
</svg>
</div>
<p><br>代码很简单（path路径的d属性除外，机器语言一般：<br><br></p><p><div style="margin: 0 auto; width: 420px; height: 420px; border: 1px solid;"></p><p><svg width="420" height="420"></p><p> <path fill="none" style="font-family:'微软雅黑','黑体'; font-size: 0.65em; display: block; overflow: visible;" id="heart" d="m209.22025,177.86839c62.46273,-161.83824 307.19374,0 0,208.07773c-307.19374,-208.07773 -62.46273,-369.91597 0,-208.07773z"></path></p><p> <span style="white-space:pre"> </span><text stroke="red"></p><p><span style="white-space:pre"> </span><textPath xlink:href="#heart">=====殊=====红笺小字 说尽平生意 鸿雁在云鱼在水 惆怅此情难寄 斜阳独倚西楼 遥山恰对帘钩 人面不知何处 绿波依旧东流 此为怀人之作=====晏=====</textPath></p><p><span style="white-space:pre"> </span></text></p><p></svg></p><p></div></p>
本帖最后由 马黑黑 于 2022-3-13 16:22 编辑 <br /><br /><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;
};
</script>
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;
};
</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是天花板的意思。
马黑黑 发表于 2022-3-13 15:34
那是我摆弄的不好。这个网上有例子的，我只是坚决不看，看看我自己弄的咋样
还是通过你才知道这些的呢，谢谢黑黑{:4_187:}
马黑黑 发表于 2022-3-13 15:39
颜色调配只有多试，没什么好的方法
是啊，要调到不错的效果还挺不容易呢{:4_187:}
马黑黑 发表于 2022-3-13 15:47
本帖最后由 马黑黑 于 2022-3-13 16:06 编辑 试一个svg心形的文本效果。心形路径使用机器生成，机器就是强 ...
还能这样展示文字，太美了{:4_199:}
马黑黑 发表于 2022-3-13 16:49
126#，随机轮番输出文本，应用场景还是挺广泛的。这个示例不难理解：
原生JS文本轮番显示
这个为什么不是按顺序展示的？好像126楼的展示顺序有问题，是随意读取么？
来向老黑学习字体的颜色变化，还有阴影字体。
加林森 发表于 2022-3-13 20:55
来向老黑学习字体的颜色变化，还有阴影字体。
{:5_108:}
红影 发表于 2022-3-13 20:22
这个为什么不是按顺序展示的？好像126楼的展示顺序有问题，是随意读取么？
随机的，不安顺序
红影 发表于 2022-3-13 20:17
还能这样展示文字，太美了
在svg里，有路径可以绑定就行
红影 发表于 2022-3-13 20:16
是啊，要调到不错的效果还挺不容易呢
需要有没学家的眼光。俺眼光不行，看镁铝还可以，发现其他的没就差太远
红影 发表于 2022-3-13 20:15
还是通过你才知道这些的呢，谢谢黑黑
@keyframes之前早就介绍了的哦
马黑黑 发表于 2022-3-11 16:50
.gg {
font-family: '微软雅黑';
font-weight: 900;
这个渐变效果的字体我以前是flash制作的，现在可以css编辑出来了，太棒了{:4_178:}
小辣椒 发表于 2022-3-13 22:53
这个渐变效果的字体我以前是flash制作的，现在可以css编辑出来了，太棒了
CSS还有进步空间
马黑黑 发表于 2022-3-13 22:17
这个有点厉害，特别是改变颜色怎么变呢。