純css實現計數器效果

2022-09-13 00:45:32 字數 2271 閱讀 9184

先上效果圖：

點選選項框，下面的數字動態顯示總個數，該效果由純css實現。怎麼實現的呢？主要就是靠css中的計數器counter。

css的counter-reset屬性可以設定乙個計數器，並通過counter-increment屬性實現遞增效果。具體可以看**：

1


html


4input:checked


7.counter:afterh1h1:beforeh2:before



<


h1>一級標題


h1>


<


h2>二級標題


h2>


<


h2>二級標題


h2>


<


h2>二級標題


h2>


<


h1>一級標題


h1>


<


h2>二級標題


h2>


<


h2>二級標題


h2>


<


h1>一級標題


h1>


<


h2>二級標題


h2>


<


h2>二級標題


h2>


<


h2>二級標題


h2>
效果：

甚至，我們可以控制一次counter-increment增加的數字。

CSS的計數器

前端相容 11 19 當前位置 首頁 前端相容 正文 css counters其實就是一計數器，早期在css中計數器僅存在於ul和ol元素。如果要使用在div這樣的元素上，只能通過list style image或者是元素的backgroud image來實現。在 css2.1的規範 中介紹了一種新...

css計數器詳解

就是採用css給一些html元素自動生成編號，比如類似1.3.2這種，先看個效果 對，就是這種類似word裡面很常見的效果，如下 進風口的爽膚水 非進口商的 非進口商的 非進口商的 進風口的爽膚水 非進口商的 非進口商的 將咖啡色的開發商 將咖啡色的開發商 將咖啡色的開發商 將咖啡色的開發商 非進口...

計數器 讓我們學會使用 CSS 計數器

我看來，css計數器在web上還沒有得到充分利用，儘管它們的支援非常好 ie8 在本文中，我將解釋如何在專案中使用css計數器，以及一些用例。計數器是css3提供的乙個強大的工具，是一種可以讓我們使用css給元素自動編號的方法。使用它可以很方便對頁面中的任意元素進行計數，實現類似於有序列表的功能。但...