文字效果集中营

马黑黑

红影 发表于 2022-3-12 19:03
这么多的效果，看得心花怒放

这里，好多是我自己做的，有些是参考网络上然后修改的

马黑黑

红影 发表于 2022-3-12 19:01
现在这个就已经有逐字效果呢

这个纯属原创哈

马黑黑

红影 发表于 2022-3-12 18:56
嗯嗯，知道了

嗯，即使修改父div的高度，效果就不一样

红影

马黑黑 发表于 2022-3-12 20:52
我看还可以

这个跟颜色关系很大，我把#ccc换别的颜色了，效果和你这个不能比呢

红影

马黑黑 发表于 2022-3-12 20:53
嗯，这个的确是标准的仿生字，和仿生猪肉（植物性猪肉）差不多的效果。

这个颜色配的好美啊

红影

马黑黑 发表于 2022-3-12 20:54
这里，好多是我自己做的，有些是参考网络上然后修改的

很厉害

红影

马黑黑 发表于 2022-3-12 20:55
这个纯属原创哈

非常赞，黑黑聪明

红影

马黑黑 发表于 2022-3-12 20:56
嗯，即使修改父div的高度，效果就不一样

是啊，要作出好的效果，需要很仔细的调配呢

马黑黑

红影 发表于 2022-3-12 22:00
是啊，要作出好的效果，需要很仔细的调配呢

对对对

马黑黑

红影 发表于 2022-3-12 21:58
非常赞，黑黑聪明

聪明谈不上，勤劳是真的

马黑黑

红影 发表于 2022-3-12 21:57
很厉害

马黑黑

红影 发表于 2022-3-12 21:56
这个颜色配的好美啊

还行吧

马黑黑

红影 发表于 2022-3-12 21:55
这个跟颜色关系很大，我把#ccc换别的颜色了，效果和你这个不能比呢

反正吧，前景色和背景色要一致

马黑黑

翻转文字方向发错地方了，本帖一楼有链接。

这是一个极其怪异的文字排版实现方式，仅设置字间距为文字大小的两倍或以上，文字就整行地左右倒转，值得玩味。

马黑黑

君不见黄河之水天上来君不见黄河之水天上来君不见黄河之水天上来

马黑黑

115#在论坛的效果不及本地测试，原因不明。代码及解析如下：

<style type="text/css">
.innerBox {
        width: 10rem;
        height: 20px;
        overflow: hidden;
        font-size: 1rem;
        animation: writing 5s steps(11,end) infinite;
}

@keyframes writing {
        0% { width: 0 }
        100% { width: 12rem; }
}
</style>

<div class="innerBox">君不见黄河之水天上来</div>


解析：实现方法是使用一个 @keyframes 动画 writing 来模拟逐字上屏的打字效果。动画从 width: 0 到 width: 10rem 演变，即盒子的宽度从 0 变到到 12 个rem（rem和em差不多，1个rem或1个em就是一个汉字的宽度），期间，盒子CSS代码中 animation 对它的调用采用分步方式 steps(10,end) 运行，分 11 步，因为例子里有10个汉字，0 的时候没有字，所以加 1 步。


若想打完字又逐一删除，可在 animation 调用的 writing 动画代码中的 infinite 之后加入 alternate 。

红影

马黑黑 发表于 2022-3-12 22:53
聪明谈不上，勤劳是真的

这些我都本地机上试了一下，发现还是你调配好的好看，有些我换一下颜色，效果就差很多。黑黑辛苦了

红影

马黑黑 发表于 2022-3-12 22:54
反正吧，前景色和背景色要一致

也是一致的啊，但效果完全不行。你这里面的这个太漂亮了

红影

马黑黑 发表于 2022-3-13 08:40
115#在论坛的效果不及本地测试，原因不明。代码及解析如下：

这个才是真的逐字打字吧，不过和前面的14楼从效果上看差不多呢，虽然语句不同。

红影

马黑黑 发表于 2022-3-13 08:40
115#在论坛的效果不及本地测试，原因不明。代码及解析如下：

我也在本地测试了一下，感觉差不多啊。