溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關用css3實現打點效果的案例的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
基于box-shadow實現的打點效果
理論上，box-shadow可以實現任意的圖形效果，自然我們可以利用box-shadow生成我們的點效果，然后通過animation控制不同時間點點的數目就可以實現點點點... loading效果了~
1. 漸進兼容
支持CSS3 animation動畫的瀏覽器顯示的就是打點動畫效果；對于不支持的瀏覽器，IE7/IE8顯示的是真實的字符..., IE9瀏覽器雖然也是CSS3生成，但是是靜態的，沒有動畫效果；此乃漸進兼容。
2. 實現原理
首先HTML非常簡單，就是一個標簽一個類名（標簽里面一定要空空如也），其他什么都不需要關心，就可以游刃幾乎各種場景，如下：
XML/HTML Code復制內容到剪貼板
訂單提交中<span class="dotting"></span>
上面代碼這個類名為dotting的span就是我們所有的玄機所在，頁面任意地方，只要有這一小撮HTML就可以有打點動畫，與文字混排良好，且顏色自動匹配。例如，本文“標題一”和“標題二”后面的點點點動畫就是添加了這么點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>感謝各位的閱讀！關于用css3實現打點效果的案例就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
