个文字闪烁变换颜色特效，很久前从网上扣来的
[html] <div>
<a href='<a href=”https://www.daokers.com” target=”_blank”>https://www.daokers.com</a>’ id=wandad name=”wandad”>金刀客</a>
</div>
<SCRIPT type=text/javascript>
var obj;
var r, g, b;
function wandadToColor() {
try {
if (typeof obj != “object”) {
obj = document.all ? document.all(“wandad”) : (document.getElementById ? document.getElementById(“wandad”) : null);
}
}catch (e) {
obj = null;
}
if (obj != null) {
r = Math.floor(Math.random()*255);
g = Math.floor(Math.random()*255);
b = Math.floor(Math.random()*255);
obj.style.color = “rgb(” + r + “,” + g + “,” + b + “)”;
}
setTimeout(“wandadToColor()”,200);
}
wandadToColor();
</SCRIPT>
[/html]

否用CSS编写一个模拟打字输出“对”的过程？

有同学留言，让我用CSS实现这个效果。大家看看，是不是很有趣？七夕快到了，我想了想，写了一个demo。首先看一下效果，屏幕上会出现打字的动画，好像想了一下又删掉了“我爱你”，只留下了“对不起”，有点内涵。再看一次，打字的动画并不难。但如果只用CSS来实现，就有一定难度了。我们只看一下只用CSS实现这个效果的代码。这个效果除了打字，还需要文字的回删和光标的闪烁。只用CSS来做其实是有点难度的，代码不多，但需要扎实的基本功和思路。

先看一下现在的布局，这几个字出现了。这里用了一个叫做monospace的字体。

为什么要用这个字体呢？因为这套字体是等宽字体，每个字母和数字的宽度相等。每个汉字的宽度是字母的两倍。这样计算会更方便。由于我将body转换为弹性容器，所以r1的大小已经接近于里面文字的大小了。我们可以看到，r1占满了整个行，如果没有转换为弹性容器，它会占一行。

我们需要将其位置设置为原来的位置。现在需要用到伪元素了。先设置一下伪元素的背景颜色。由于伪元素是绝对定位，四个方向的偏移量为0，所以应该会占满整个h1。这样就覆盖住了所有的文字，然后做一个动画，让伪元素的左位移量值发生变化，这样文字就一个一个出现了。

我们来写一个动画。动画很简单，让最终状态的左位移量值为100%即可。动画开始时，左位移量值是从0开始的，和这里的初始值一样，因此可以省略from，直接写to。动画需要3秒钟完成，文字就可以显示出来了。现在的效果是很平滑的。我希望文字像打字一样一个一个出现，所以让它按七个字符的步骤出现，然后停在最后一个状态。

现在文字就这样一个一个地跳出来了。

·我们把红色的背景换成黑色，同时删除了前面的黑色边框。现在看起来有点像打字的效果，但正常打字还应该有光标。这里我们用after伪元素来实现，宽度设为2个像素即可。背景颜色设为黑色，出现了黑色的光标，但它应该随着文字移动。同样地，将前面的动画与之绑定。现在光标随着文字出现了，但应该有闪烁的效果。因此，我们需要编写一个动画，使光标闪烁，并在开始和结束时保持透明，并在中间过渡到白色。将动画的播放时间设置为500毫秒，并循环播放。现在，打字的效果就出来了。不过，先让光标出现，再让文字出现可能更真实。因此，我们将前两个动画的播放时间延迟了500毫秒。

好了！现在打字的效果基本完成了。但是，难点是如何在打完这句话后删除“我爱你”这几个字。

这并不难，但需要一些技巧。我们需要编写另一个动画来控制这两个伪元素的左移值，起始位置应为100%，即最右端。关键是to应该是多少，应该删除到do号处，也就是后面这段文字全部删除的位置，即对不起前面三个字的宽度。

to的值应该是多少？我们介绍一个很少使用的单位ch，一个ch等于一个字母，在使用等宽字体的情况下，它等于一个字母的宽度。两个ch正好等于一个汉字的宽度，也就是两个ch。左移值刚才已经分析过了，是对不起三个字的宽度，也就是6ch。将其绑定在伪元素上，让它在两秒钟内完成，并发布执行。

总共要删除四个字符，因此需要分四步执行，并在前面的动画完成后再执行，因此需要将动画的延迟时间设置为4.5秒，以保持动画的最终状态。两个伪元素都需要绑定这个动画，现在看一下最终的效果。没问题，已经删除了。

视频就到这里，感谢观看。