用css3實現(xiàn)打點效果的案例

發(fā)布時間：2020-10-26 09:11:22 來源：億速云閱讀：151 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)用css3實現(xiàn)打點效果的案例的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

基于box-shadow實現(xiàn)的打點效果

理論上，box-shadow可以實現(xiàn)任意的圖形效果，自然我們可以利用box-shadow生成我們的點效果，然后通過animation控制不同時間點點的數(shù)目就可以實現(xiàn)點點點... loading效果了~

1. 漸進兼容
支持CSS3 animation動畫的瀏覽器顯示的就是打點動畫效果；對于不支持的瀏覽器，IE7/IE8顯示的是真實的字符..., IE9瀏覽器雖然也是CSS3生成，但是是靜態(tài)的，沒有動畫效果；此乃漸進兼容。

2. 實現(xiàn)原理
首先HTML非常簡單，就是一個標(biāo)簽一個類名（標(biāo)簽里面一定要空空如也），其他什么都不需要關(guān)心，就可以游刃幾乎各種場景，如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

訂單提交中<span class="dotting"></span>

上面代碼這個類名為dotting的span就是我們所有的玄機所在，頁面任意地方，只要有這一小撮HTML就可以有打點動畫，與文字混排良好，且顏色自動匹配。例如，本文“標(biāo)題一”和“標(biāo)題二”后面的點點點動畫就是添加了這么點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:">提交進行中<dot>...</dot></a>
</body>
</html>

感謝各位的閱讀！關(guān)于用css3實現(xiàn)打點效果的案例就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

用css3實現(xiàn)打點效果的案例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽