站長資訊網(wǎng)基于box-shadow實(shí)現(xiàn)的打點(diǎn)效果
理論上，box-shadow可以實(shí)現(xiàn)任意的圖形效果，自然我們可以利用box-shadow生成我們的點(diǎn)效果，然后通過animation控制不同時(shí)間點(diǎn)點(diǎn)的數(shù)目就可以實(shí)現(xiàn)點(diǎn)點(diǎn)點(diǎn)… loading效果了~
1. 漸進(jìn)兼容
支持CSS3 animation動畫的瀏覽器顯示的就是打點(diǎn)動畫效果；對于不支持的瀏覽器，IE7/IE8顯示的是真實(shí)的字符…, IE9瀏覽器雖然也是CSS3生成，但是是靜態(tài)的，沒有動畫效果；此乃漸進(jìn)兼容。
2. 實(shí)現(xiàn)原理
首先HTML非常簡單，就是一個(gè)標(biāo)簽一個(gè)類名（標(biāo)簽里面一定要空空如也），其他什么都不需要關(guān)心，就可以游刃幾乎各種場景，如下：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
訂單提交中<span class="dotting"></span>
上面代碼這個(gè)類名為dotting的span就是我們所有的玄機(jī)所在，頁面任意地方，只要有這一小撮HTML就可以有打點(diǎn)動畫，與文字混排良好，且顏色自動匹配。例如，本文“標(biāo)題一”和“標(biāo)題二”后面的點(diǎn)點(diǎn)點(diǎn)動畫就是添加了這么點(diǎn)HTML.
下面是萬眾矚目的CSS代碼了：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> dot { display:inline-block; width:3ch; text-indent:-1ch; vertical-align:bottom; overflow:hidden; animation:dot 3s infinite step-start both; } @keyframes dot { 33% { text-indent: 0; } 66% { text-indent: -2ch; } } </style> </head> <body> <a href="javascript:">提交進(jìn)行中<dot>...</dot></a> </body> </html>
