企業(yè)網(wǎng)站建設(shè)制作技巧：給網(wǎng)站添加文字打字效果

繼續(xù)企業(yè)網(wǎng)站建設(shè)制作技巧分享。大家可能在某些網(wǎng)站上看到過一些特殊的效果，比如打字效果，即文字不會(huì)直接顯示出來，而是像鍵盤打字一樣一個(gè)個(gè)顯示出來，看起來比較炫，這種效果在某些場(chǎng)景下還是有點(diǎn)用的。如果你想在企業(yè)網(wǎng)站制作設(shè)計(jì)中添加這種效果，那么就往下看吧。

這種文字打字效果實(shí)現(xiàn)的方法其實(shí)比較多，可以使用JS、CSS來現(xiàn)實(shí)，如果你使用的是wordpress建站，那么也可以使用插件來實(shí)現(xiàn)，比如Elementor、WPBakery Page Builder這兩個(gè)插件都支持類似的功能。

如果你的企業(yè)網(wǎng)站建設(shè)已經(jīng)做好，那么就沒有必要為了這么一個(gè)效果去安裝插件，而JS的方法也不是很推薦，所以本文悅?cè)黄髽I(yè)網(wǎng)站建設(shè)給大家分享一個(gè)使用CSS實(shí)現(xiàn)文字打字效果的方法，很簡(jiǎn)單。

直接上代碼：

<p>悅?cè)黄髽I(yè)網(wǎng)站建設(shè)-幫您的公司制作有效果的網(wǎng)站！</p>
<style>
@keyframes cursor {
 50% {
 border-color: transparent;
}
}
@keyframes text {
from {
width: 0;
}
}
p {
    width: 50ch;
    border-right: solid 1px #000;
    white-space: nowrap;
    overflow: hidden;
    font: 30px monospace;
    animation: cursor 1s infinite step-end, text 4s steps(35);
}
</style>

如上圖所示，第一行可以自行輸入你自己的文字。【width: 50ch】表示字符數(shù)，這里根據(jù)實(shí)際字?jǐn)?shù)來填寫即可，一個(gè)漢字為兩個(gè)字符。

簡(jiǎn)單修改上面的代碼之后以直接插入到網(wǎng)站的HTML模塊中即可，網(wǎng)站的任何頁(yè)面包括首頁(yè)、產(chǎn)品、文章頁(yè)都可以使用，實(shí)現(xiàn)效果如上上圖所示。

總結(jié)

這個(gè)文字打字效果的實(shí)現(xiàn)方法適合任意類型的網(wǎng)站，不管你使用的是wordpress建站或者是其它建站程序都可以使用。不過這種效果盡量還是少用吧，可以在某些活動(dòng)、廣告內(nèi)容中使用，日常的企業(yè)網(wǎng)站內(nèi)容更新還是直接寫文字配圖就OK了，內(nèi)容才是網(wǎng)站SEO優(yōu)化的關(guān)鍵哦。