如何使用content換行技術(shù)實(shí)現(xiàn)字符animation loading效果

這篇文章主要介紹如何使用content換行技術(shù)實(shí)現(xiàn)字符animation loading效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

一、之前我的字符loading實(shí)現(xiàn)

關(guān)于字符打點(diǎn)動(dòng)畫(huà)實(shí)現(xiàn)，我之前使用過(guò)box-shadow模擬，還有border+background模擬，還有使用text-shadow實(shí)現(xiàn)，以及今年自認(rèn)為是最好的實(shí)現(xiàn)的利用CSS3 ch單位的實(shí)現(xiàn)，效果類(lèi)似下面（偷懶，非真實(shí)截圖，以前做的圖）：

然后，我今天才發(fā)現(xiàn)，原來(lái)還真是一山還有一山高，有個(gè)更巧妙的字符打點(diǎn)動(dòng)畫(huà)，利用CSS content內(nèi)容生成技術(shù)以及CSS3 animation實(shí)現(xiàn)的，并且?guī)缀鯖](méi)有任何的不足，這里給大家展示下如何實(shí)現(xiàn)的。

CSS代碼如下：

dot {
    display: inline-block; 
    height: 1em; line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}
dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;   /* 也可以是white-space: pre */animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}

HTML代碼如下：

訂單提交中<dot>...</dot>

然后成就即達(dá)成！并且IE6-IE9完美自動(dòng)向下兼容（靜態(tài)3個(gè)點(diǎn)），IE10+就是動(dòng)畫(huà)。

你可以狠狠地點(diǎn)擊這里：content字符生成配合CSS3 animation點(diǎn)點(diǎn)點(diǎn)動(dòng)畫(huà)demo

二、content換行技術(shù)是知道的，關(guān)鍵是創(chuàng)意和思路

如果把上面使用的技術(shù)拆分下，其實(shí)都是知道的。兩個(gè)要點(diǎn)，一是content字符內(nèi)容生成的換行實(shí)現(xiàn)，二是CSS3 animation動(dòng)畫(huà)。

1. 關(guān)于content換行技術(shù)在我之前的這篇“使用CSS(Unicode字符)讓inline水平元素?fù)Q行”文章有詳細(xì)介紹，其中'\A'其實(shí)指的是換行符中的LF字符，其unicode編碼是000A，在CSS content屬性中則直接寫(xiě)作'\A'；換行符除了LF字符還有CR字符，其Unicode編碼是000D，在CSS content屬性中則直接寫(xiě)作'\D'。CR字符和LF字符分別指回車(chē)（CR）和換行（LF）。

2. 關(guān)于CSS3 animation介紹的文章就更多了。

CSS這么語(yǔ)言的精彩之處就在于，要想學(xué)得好，不僅需要技術(shù)積累，細(xì)節(jié)扎實(shí)，而且還需要?jiǎng)?chuàng)意和思路，所以，我常說(shuō)CSS要想學(xué)得好是需要點(diǎn)那么不可言喻的天賦的，我想這種天賦就是創(chuàng)造性思維和發(fā)散性思維，這和一板一眼的邏輯語(yǔ)言不一樣，畢竟我們是為精彩紛呈的效果和各式各樣的布局服務(wù)的。

回到這里，我有必要好好反思下，字符打點(diǎn)動(dòng)畫(huà)我這些年時(shí)不時(shí)就思考有沒(méi)有更好的實(shí)現(xiàn)，雖然我知道content內(nèi)容換行技術(shù)以及熟知CSS3 animation屬性，但是，我卻沒(méi)有想到這種實(shí)現(xiàn)，說(shuō)明自己的思路還是不夠開(kāi)闊，個(gè)中關(guān)聯(lián)沒(méi)有能夠聯(lián)系在一起，唉，對(duì)自己產(chǎn)生了一絲絲的懷疑……

本文利用content實(shí)現(xiàn)字符打點(diǎn)loading效果我是在這個(gè)github項(xiàng)目看到的：tawian/text-spinners

當(dāng)然，我自己還有一絲欣慰的，就是站在巨人的肩上，我細(xì)節(jié)要比原實(shí)現(xiàn)要好，好在沒(méi)有使用任何hack技巧實(shí)現(xiàn)的所有瀏覽器的全兼容（不支持animation的瀏覽器靜態(tài)三個(gè)點(diǎn)），原來(lái)的實(shí)現(xiàn)直接忽略了IE9-IE6瀏覽器，直接沒(méi)有點(diǎn)。

原來(lái)的實(shí)現(xiàn)content是使用的<span>元素，CSS部分使用的是::after偽元素，display設(shè)置為inline-table，第1行是1個(gè)點(diǎn)，代碼如下：

<span class="loading"></span>

.loading::after {
  display: inline-table;
  content: "\A.\A..\A...";
  white-space: pre;
  animation: spin4 2s steps(4) infinite;
}

而我的實(shí)現(xiàn)的是使用自定義的<dot>元素，CSS部分使用的是::before偽元素，display設(shè)置為block，第1行是3個(gè)點(diǎn)，代碼如下：

<dot>...</dot>

dot::before {
  display: block;
  content: '...\A..\A.';
  white-space: pre-wrap;
  animation: dot 3s infinite step-start both;
}

使用自定義<dot>元素的好處是IE7,IE8瀏覽器根本就不認(rèn)識(shí)這個(gè)元素，相關(guān)CSS會(huì)忽略，直接顯示3個(gè)點(diǎn)；使用::before偽元素，display設(shè)置為block原因在于其他現(xiàn)代瀏覽器可以把原來(lái)的3個(gè)點(diǎn)推到看不見(jiàn)的最下面，顯示的是content插入的第1行的3個(gè)點(diǎn)。于是，全瀏覽器都顯示良好。

有此可見(jiàn)，創(chuàng)意固然重要，基礎(chǔ)和細(xì)節(jié)也是不可忽視的，這樣，才能實(shí)現(xiàn)完美的效果——現(xiàn)在這種實(shí)現(xiàn)，外面標(biāo)簽的寬度就是3個(gè)點(diǎn)的寬度，不要擔(dān)心超出或剪裁，字符實(shí)現(xiàn)，和前面的文字字體，顏色保持一致，完美！

三、content字符生成配合CSS3 animation各類(lèi)字符loading效果實(shí)現(xiàn)

其實(shí)，content字符生成配合CSS3 animation可以實(shí)現(xiàn)的不僅僅是打點(diǎn)這一種字符動(dòng)畫(huà)效果，你使用其他一些有意思的字符就能時(shí)間更多有意思的loading效果，如下截圖（圖截自這個(gè)演示頁(yè)面）：

例如，我們命令行中常見(jiàn)的loading動(dòng)畫(huà)實(shí)現(xiàn)只要content設(shè)置為下面這個(gè)值就可以：

.loading::after {
  display: inline-table;  content: "/\A–\A\\\A|";
  white-space: pre;
  animation: spin4 2s steps(4) infinite;
}

以上是“如何使用content換行技術(shù)實(shí)現(xiàn)字符animation loading效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！