整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
家好，我是大澈！
本文約 900+ 字，整篇閱讀約需 1 分鐘。
每日分享一段優(yōu)質(zhì)代碼片段。
今天分享一段優(yōu)質(zhì) CSS 代碼片段，實現(xiàn)打字機般的效果或其他類似的離散動畫效果。
老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區(qū)留下你的見解！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS打字機效果</title>
<style>
.text {
border-right: 2px solid #eee;
font-size: 28px;
text-align: center;
white-space: nowrap;
overflow: hidden;
background: #fff;
}
.useAnimation {
animation: width-change 4s steps(44) 1s normal both,
color-change 0.5s steps(44) infinite normal;
}
@keyframes width-change {
from {
width: 0;
}
to {
width: 343px;
}
}
/* 豎線的閃爍效果 */
@keyframes color-change {
from {
border-right-color: #363636;
}
to {
border-right-color: #ffffff;
}
}
</style>
</head>
<body>
<p class="text useAnimation">
歡迎投稿分享,優(yōu)質(zhì)代碼片段
</p>
</body>
</html>分享原因
這段代碼展示了如何使用 CSS 動畫來創(chuàng)建文本打字效果，以及如何使光標(biāo)閃爍。
這種動畫效果通常用于增強用戶界面的動態(tài)交互感。
例如：在博客文章或新聞網(wǎng)站中，使用這種效果可以突出顯示重要的引用或關(guān)鍵信息，吸引讀者的關(guān)注。
代碼解析
1. 基本樣式設(shè)置 .text
border-right: 2px solid #eee;：添加一個右邊框，模擬光標(biāo)效果。
white-space: nowrap;：防止文本換行。
overflow: hidden;：隱藏超出容器范圍的內(nèi)容。
2. @keyframes width-change
from { width: 0; }：起始狀態(tài)寬度為 0。
to { width: 343px; }：結(jié)束狀態(tài)寬度為 343px，可根據(jù)文本實際寬度自行調(diào)整。
3. @keyframes color-change
from { border-right-color: #363636; }：起始狀態(tài)右邊框顏色為深灰色。
to { border-right-color: #ffffff; }：結(jié)束狀態(tài)右邊框顏色為白色。
4. 應(yīng)用動畫 .useAnimation
animation：應(yīng)用兩個動畫 width-change 和 color-change。
width-change 4s steps(44) 1s normal both：
動畫 width-change 運行 4 秒。
動畫延遲 1 秒開始。
normal 表示正常播放。
both 表示動畫結(jié)束時保持最終狀態(tài)。
steps(44) 會使動畫在 4 秒內(nèi)完成 44 步，每步大約 0.09 秒（4 秒除以 44 步）。這會產(chǎn)生一種逐步增加寬度的效果，類似于打字機一個字符一個字符顯示的效果。
color-change 0.5s steps(44) infinite normal：
動畫 color-change 運行 0.5 秒。
infinite 表示動畫無限循環(huán)。
steps(44) 創(chuàng)建了一個分為 44 步的閃爍動畫，每步大約 0.011 秒（0.5 秒除以 44 步），這會使光標(biāo)看起來在不斷閃爍。
- end -
C#中，字符串字面量可以使用不同的引號來定義，每種方式都有其特定的用途和特性。
@"" (Verbatim String Literals)
使用@符號開始一個字符串字面量時，實際上創(chuàng)建了一個所謂的“原樣”或“逐字”字符串。這意味著字符串中的所有字符都將被按照它們出現(xiàn)的方式處理，包括轉(zhuǎn)義序列。例如，\n在普通字符串中表示換行符，但在逐字字符串中，它將被視為兩個字符：反斜杠（\）和字母n。
string path=@"C:\folder\file.txt";在這個例子中，字符串包含了實際的字符C:\folder\file.txt，而不是嘗試去解釋其中的轉(zhuǎn)義序列。
""" (Triple-quoted String Literals)
從C# 11開始，可以使用三個雙引號（"""）來創(chuàng)建多行字符串字面量。這種類型的字符串允許你在不使用轉(zhuǎn)義序列的情況下包含換行符和引號。這在編寫長文本或HTML代碼塊時非常有用，不必擔(dān)心轉(zhuǎn)義引號或換行符。
以下HTML標(biāo)記用于格式化網(wǎng)頁上文本的外觀。這可以使網(wǎng)頁變得更加生動，但是，文本格式的太多變化也會使人不快。
head標(biāo)記有6個級別可用，從h1用于最大和最重要的標(biāo)題，到h6是最小的標(biāo)題。
b標(biāo)記之間的文本以粗體顯示，與周圍的文本相對突出。
i標(biāo)記以一個小角度顯示文本。
u標(biāo)記在文本正文添加一條線，請注意，鏈接已經(jīng)有下劃線，不需要額外的標(biāo)記。
strike標(biāo)記在文本的正中間畫一條線，通常用來表示文本是舊的，不再相關(guān)，刪除。也可以用<s></s>代替。
pre標(biāo)記之間的任何文本，包括空格、回車符和標(biāo)點符號，都將像在文本編輯器中一樣顯示在瀏覽器中（通常瀏覽器會忽略多個空格）
code標(biāo)記之間的文本以固定寬度字體顯示，通常在顯示源代碼時使用。
tt標(biāo)記之間的文本就像是用打字機打出了一個固定寬度的文字。
blockquote標(biāo)記定義一個塊引用，并且在塊的左右添加額外的邊距。
small標(biāo)記讓你無需設(shè)置字體大小，就可以使文本呈現(xiàn)比周圍稍小的外觀。
font標(biāo)記的color屬性改變幾個字或一段文字的顏色。屬性使用十六進制顏色代碼。
font標(biāo)記的size屬性改變字體的大小，值范圍從1到7，1是最小，7是最大。
font標(biāo)記的size屬性還可以相對于其前面的字體大小的作即時更改，此用法將按你指定的數(shù)字增減字體大小。例如：<font size="-1">一些文本</font>
font標(biāo)記的face屬性以指定的字體顯示文本，值為字體名稱，如“Helvetica”、“Arial”或“Courier”。
center標(biāo)記之間的所有內(nèi)容都居中。
em標(biāo)記用于強調(diào)文本，文本通常以斜體顯示，可能會根據(jù)瀏覽器的不同而有所不同。
strong標(biāo)記用于著重強調(diào)文本，通常以粗體顯示，可能會根據(jù)瀏覽器的不同而有所不同。
下面是以上標(biāo)記的示例：
瀏覽器顯示內(nèi)容如下所示：
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
