個文字閃爍變換顏色特效，很久前從網上扣來的
[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秒，以保持動畫的最終狀態。兩個偽元素都需要綁定這個動畫，現在看一下最終的效果。沒問題，已經刪除了。

視頻就到這里，感謝觀看。