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

成都創(chuàng)新互聯(lián)主營織金網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都APP應(yīng)用開發(fā),織金h5小程序制作搭建,織金網(wǎng)站營銷推廣歡迎織金等地區(qū)企業(yè)咨詢

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

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

然后，我今天才發(fā)現(xiàn)，原來還真是一山還有一山高，有個更巧妙的字符打點動畫，利用CSS content內(nèi)容生成技術(shù)以及CSS3 animation實現(xiàn)的，并且?guī)缀鯖]有任何的不足，這里給大家展示下如何實現(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代碼如下：

訂單提交中...

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

你可以狠狠地點擊這里：content字符生成配合CSS3 animation點點點動畫demo

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

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

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

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

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

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

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

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

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

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

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

...

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

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

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

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

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

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

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

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