仅使用HTML和CSS实现的标签云效果
標(biāo)簽云的效果在博客和網(wǎng)站上不難見到，它其實(shí)就是帶有超鏈接的某些關(guān)鍵字，為了達(dá)到強(qiáng)調(diào)主題的作用。通常出現(xiàn)概率比較大或者受歡迎的標(biāo)簽文字顯示比較大，相反的就顯示的小。
來源于TagCrowd.com我們就不去深入研究標(biāo)簽云帶來的效率上的提升和可用性的細(xì)節(jié)，僅僅在外觀上帶來的美感和對(duì)全站或一整篇文章所起到的高度概括的作用就不容忽視了。
接下來，我們將討論如何用HTML和CSS來創(chuàng)建標(biāo)簽云效果。注意，我們僅僅討論如何實(shí)現(xiàn)這種UI效果而不去深究標(biāo)簽的權(quán)重或受歡迎程度是怎么算出來的。
HTML基礎(chǔ)結(jié)構(gòu)
前面說了，標(biāo)簽云就是一個(gè)連接列表。所以從語義化的視角，使用無序列表來表達(dá)每個(gè)標(biāo)簽是合理的，不用考慮按歡迎程度去排列，否則就毫無意義了。
在每個(gè)列表項(xiàng)里包含一個(gè)超鏈接標(biāo)簽，所以大體結(jié)構(gòu)就是下面的樣子：
<ul><li><a?href="/tag/word1">Word1</a></li><li><a?href="/tag/word2">Word2</a></li><li><a?href="/tag/word3">Word3</a></li><!--?...?--> </ul>每個(gè)標(biāo)簽的權(quán)重要提前算好，然后把它加到<a>上或者<li>上，我們就暫且把它加到鏈接上。
權(quán)重大的標(biāo)簽對(duì)應(yīng)顯示的文字也大，代表了它的受歡迎程度大。
<ul><li><a?href="/tag/word1"?data-weight="3">Word1</a></li><li><a?href="/tag/word2"?data-weight="7">Word2</a></li><li><a?href="/tag/word3"?data-weight="4">Word3</a></li><!--?...?--> </ul>注意：這里的data-weight是通過data-count和data-total計(jì)算而來的，這里沒辦法直接通過兩個(gè)屬性計(jì)算表示，所以我們把目標(biāo)聚焦在data-weight這樣一個(gè)屬性上。
這樣基礎(chǔ)的HTML結(jié)構(gòu)代碼就寫好了，只要稍加一些屬性就完美了。
class：有助于在添加樣式的時(shí)候確定是哪個(gè)標(biāo)簽云
role：這個(gè)是一個(gè)導(dǎo)航組件，在屏幕閱讀器上標(biāo)識(shí)和輔助作用
aria-label：給輔助功能添加標(biāo)題和描述
注意：如果列表位于<nav>標(biāo)簽內(nèi)，就不需要添加role="navigation"，可以使用aria-labelledby代替導(dǎo)航標(biāo)簽來指向?qū)Ш綐?biāo)題。
讓我們來完善一下列表數(shù)據(jù)，添加一些和開發(fā)相關(guān)的名詞作為標(biāo)簽，這樣看起來更貼近實(shí)際一點(diǎn)。
<ul?class="cloud"?role="navigation"?aria-label="Webdev?tag?cloud"><li><a?data-weight="4"?href="/tag/http">HTTP</a></li><li><a?data-weight="2"?href="/tag/ember">Ember</a></li><li><a?data-weight="5"?href="/tag/sass">Sass</a></li><li><a?data-weight="8"?href="/tag/html">HTML</a></li><li><a?data-weight="6"?href="/tag/flexbox">FlexBox</a></li><li><a?data-weight="4"?href="/tag/api">API</a></li><li><a?data-weight="5"?href="/tag/vuejs">VueJS</a></li><li><a?data-weight="6"?href="/tag/grid">Grid</a></li><li><a?data-weight="3"?href="/tag/rest">Rest</a></li><li><a?data-weight="9"?href="/tag/javascript">JavaScript</a></li><li><a?data-weight="3"?href="/tag/animation">Animation</a></li><li><a?data-weight="7"?href="/tag/react">React</a></li><li><a?data-weight="8"?href="/tag/css">CSS</a></li><li><a?data-weight="1"?href="/tag/cache">Cache</a></li><li><a?data-weight="3"?href="/tag/less">Less</a></li> </ul>下面是標(biāo)簽云現(xiàn)在看起來的效果：
這是還沒有添加任何樣式的結(jié)果，然后給它添加一些樣式
給標(biāo)簽云添加樣式
以下是我們要通過添加樣式解決的：
讓標(biāo)簽以行內(nèi)元素顯示
讓每個(gè)標(biāo)簽的font-size屬性根據(jù)data-weight大小顯示
在標(biāo)簽的右邊加上權(quán)重
讓標(biāo)簽的顏色隨機(jī)顯示
給標(biāo)簽添加:hover和:focus動(dòng)態(tài)樣式
給ul添加樣式
首先移除列表前面的小圓點(diǎn)和縮進(jìn)
list-style:?none; padding-left:?0;然后設(shè)置ul以Flexbox顯示，并且水平垂直居中保證所有的標(biāo)簽元素在一行或者多行內(nèi)顯示
display:?flex; flex-wrap:?wrap; align-items:?center; justify-content:?center;添加上行高相互之間保持一定的垂直距離，最終的ul元素的樣式如下：
ul.cloud?{list-style:?none;padding-left:?0;display:?flex;flex-wrap:?wrap;align-items:?center;justify-content:?center;line-height:?2.5rem; }然而這個(gè)時(shí)候標(biāo)簽云看起來還差很多
根據(jù)權(quán)重調(diào)整標(biāo)簽的大小
讓我們開始給標(biāo)簽一些小的變化
ul.cloud?a?{color:?#a33;display:?block;font-size:?1.5rem;padding:?0.125rem?0.25rem;text-decoration:?none;position:?relative; }通過上面的樣式，所有的標(biāo)簽變成淡紅色并且設(shè)置1.5rem大小
然而我們的要求是字體大小根據(jù)data-weight而來的，怎么實(shí)現(xiàn)呢？
web標(biāo)準(zhǔn)有一種方式是CSS可以通過attr()方法讀取HTML的data屬性值，所以我們可以通過以下方式讀取data-weight
attr([attribute-name]?[attribute-unit]??[,?default-value]?)不幸的是，目前任何瀏覽器均不支持該表示法和功能。相反，attr（）將僅返回一個(gè)字符串，并且只能在content屬性中使用。
如果web標(biāo)準(zhǔn)支持這種做法，那好辦，我們可以直接讀取屬性權(quán)重的數(shù)據(jù)，將它們保存到CSS變量中，并直接對(duì)其進(jìn)行操作，如下所示：
ul.cloud?a?{--size:?attr(data-weight?number,?2);?font-size:?calc(var(--size)?*?1rem); }但是這樣不行，我們只能通過CSS規(guī)則，屬性選擇器：data-attribute
ul.cloud?a[data-weight="1"]?{?--size:?1;?} ul.cloud?a[data-weight="2"]?{?--size:?2;?} ul.cloud?a[data-weight="3"]?{?--size:?3;?} ul.cloud?a[data-weight="4"]?{?--size:?4;?} ul.cloud?a[data-weight="5"]?{?--size:?5;?} ul.cloud?a[data-weight="6"]?{?--size:?6;?} ul.cloud?a[data-weight="7"]?{?--size:?7;?} ul.cloud?a[data-weight="8"]?{?--size:?8;?} ul.cloud?a[data-weight="9"]?{?--size:?9;?}ul.cloud?a?{--size:?4;font-size:?calc(var(--size)?*?0.25rem?+?0.5rem);/*?...?*/ }為了避免將字體大小直接設(shè)置成權(quán)重導(dǎo)致太大，因此通過一定的方法計(jì)算，結(jié)果顯示如下：
現(xiàn)在看來已經(jīng)小有成就。
為標(biāo)簽添加權(quán)重顯示
我們常見的標(biāo)簽云效果在標(biāo)簽的旁邊都有權(quán)重顯示，權(quán)重已經(jīng)有了，我們要將它展示在偽元素::after的content中
ul.cloud[data-show-value]?a::after?{content:?"?("?attr(data-weight)?")";font-size:?1rem; }然后還需要給ul元素增加[data-show-value]屬性選擇器，將它的值設(shè)為true或者false來控制標(biāo)簽后面的數(shù)字權(quán)重是否顯示
注意：data-show-value屬性選擇器的值為布爾值，即使你設(shè)置為false，它也會(huì)顯示，如果不讓它顯示，就移除該屬性
這是顯示數(shù)字權(quán)重的效果
下面的案例中將不顯示標(biāo)簽旁邊的數(shù)字
為標(biāo)簽云添加顏色
所有的標(biāo)簽一個(gè)顏色看起來很沉悶，我們將嘗試用兩種不同的方法來為它添加不同的顏色。
使用隨機(jī)生成的顏色
在CSS中沒有隨機(jī)數(shù)這么一說（雖然可以模擬出來）。我們將要做的是根據(jù)標(biāo)簽的序列號(hào)來給它定義不同的顏色，方法如下：
ul.cloud?li:nth-child(2n+1)?a?{?--color:?#181;?} ul.cloud?li:nth-child(3n+1)?a?{?--color:?#33a;?} ul.cloud?li:nth-child(4n+1)?a?{?--color:?#c38;?}通過這種方式我們給它添加了綠色，藍(lán)色和紫色代替了之前的淡紅色，雖然也不是完全隨機(jī)（有一定的規(guī)律在），但是用戶很難發(fā)現(xiàn)。
使用同一種顏色的不同透明度值
我們通過增加標(biāo)簽對(duì)比度來達(dá)到強(qiáng)調(diào)受歡迎程度的效果，在淺色背景下，使用深色更加明顯。
HSL格式的顏色值可以實(shí)現(xiàn)，但是我們采用最快的方式，直接對(duì)標(biāo)簽設(shè)置透明度，透明度的值根據(jù)權(quán)重值計(jì)算而來：
看下變化后的效果
定義它的輪廓
當(dāng)我們觸摸標(biāo)簽的時(shí)候outline樣式會(huì)比較重要，尤其對(duì)于殘障人士在可訪問性方面。
我們將給outline添加和標(biāo)簽字體顏色一致的邊框
ul.cloud?a:focus?{outline:?1px?dashed; }?在這里我們是通過鼠標(biāo)點(diǎn)擊事件去模擬的
添加動(dòng)態(tài)效果
為了增加交互性，我們?yōu)樗砑右粋€(gè)簡單的動(dòng)畫：當(dāng)用戶將鼠標(biāo)移動(dòng)或者懸停在一個(gè)標(biāo)簽上時(shí)，標(biāo)簽的背景色變換并且有一個(gè)水平展開的效果。
因?yàn)樗侨Q于狀態(tài)的動(dòng)畫，所以我們將使用transition而不是animation動(dòng)畫。
實(shí)現(xiàn)方式是通過a標(biāo)簽的偽元素::before的寬度值變化，在focus和hover狀態(tài)下從0變?yōu)?00%來達(dá)到這樣一個(gè)微交互。
CSS代碼和偽元素的狀態(tài)行為：
ul.cloud?a::before?{content:?"";position:?absolute;top:?0;left:?50%;width:?0;height:?100%;background:?var(--color);transform:?translate(-50%,?0);opacity:?0.15;transition:?width?0.25s; }ul.cloud?a:focus::before, ul.cloud?a:hover::before?{width:?100%; }對(duì)于動(dòng)畫效果：用戶不能根據(jù)自己的喜好來開啟或者關(guān)閉。如果真是一個(gè)需求的話，我們還是要尊重用戶的喜好移除動(dòng)畫的。
可以通過媒體查詢特性prefers-reduced-motion來達(dá)到
（https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
）
好了，以上就是實(shí)現(xiàn)全過程，如果有哪里不懂，可以留言一起交流。
總結(jié)
以上是生活随笔為你收集整理的仅使用HTML和CSS实现的标签云效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【详细教程】教你如何使用Node + E
- 下一篇： 前端八大灵感设计，代码变为现实