在前端中實現(xiàn)標簽云效果？使用HTML和CSS實現(xiàn)案例分享！

蘿莉的小草莓 2021-08-18 14:42:03 瀏覽數(shù) (3909)

反饋

相信大家對于標簽云不是很陌生，而且對于這個效果我們在博客和網(wǎng)站上不難見到，那么今天小編就來和大家講講有關于：“在前端中實現(xiàn)標簽云效果？”這個問題的相關內容分享！

首先，我們知道它其實就是帶有超鏈接的某些關鍵字，為了達到強調主題的作用。通常出現(xiàn)概率比較大或者受歡迎的標簽文字顯示比較大，相反的就顯示的小。

來源于TagCrowd.com

我們就不去深入研究標簽云帶來的效率上的提升和可用性的細節(jié)，僅僅在外觀上帶來的美感和對全站或一整篇文章所起到的高度概括的作用就不容忽視了。

接下來，我們將討論如何用HTML和CSS來創(chuàng)建標簽云效果。注意，我們僅僅討論如何實現(xiàn)這種UI效果而不去深究標簽的權重或受歡迎程度是怎么算出來的。

HTML基礎結構

前面說了，標簽云就是一個連接列表。所以從語義化的視角，使用無序列表來表達每個標簽是合理的，不用考慮按歡迎程度去排列，否則就毫無意義了。

在每個列表項里包含一個超鏈接標簽，所以大體結構就是下面的樣子：

<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>

每個標簽的權重要提前算好，然后把它加到 <a> 上或者 <li> 上，我們就暫且把它加到鏈接上。

權重大的標簽對應顯示的文字也大，代表了它的受歡迎程度大。

<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計算而來的，這里沒辦法直接通過兩個屬性計算表示，所以我們把目標聚焦在data-weight這樣一個屬性上。

這樣基礎的HTML結構代碼就寫好了，只要稍加一些屬性就完美了。

class：有助于在添加樣式的時候確定是哪個標簽云
role：這個是一個導航組件，在屏幕閱讀器上標識和輔助作用
aria-label：給輔助功能添加標題和描述

注意：如果列表位于 <nav> 標簽內，就不需要添加 role="navigation" ，可以使用aria-labelledby代替導航標簽來指向導航標題。

讓我們來完善一下列表數(shù)據(jù)，添加一些和開發(fā)相關的名詞作為標簽，這樣看起來更貼近實際一點。

<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>

下面是標簽云現(xiàn)在看起來的效果：

這是還沒有添加任何樣式的結果，然后給它添加一些樣式

給標簽云添加樣式

以下是我們要通過添加樣式解決的：

讓標簽以行內元素顯示
讓每個標簽的font-size屬性根據(jù) data-weight 大小顯示
在標簽的右邊加上權重
讓標簽的顏色隨機顯示
給標簽添加:hover和:focus動態(tài)樣式

給ul添加樣式

首先移除列表前面的小圓點和縮進：

list-style: none;
padding-left: 0;

然后設置 ul 以Flexbox顯示，并且水平垂直居中保證所有的標簽元素在一行或者多行內顯示：

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;
}

然而這個時候標簽云看起來還差很多

根據(jù)權重調整標簽的大小

讓我們開始給標簽一些小的變化：

ul.cloud a {
  color: #a33;
  display: block;
  font-size: 1.5rem;
  padding: 0.125rem 0.25rem;
  text-decoration: none;
  position: relative;
}

通過上面的樣式，所有的標簽變成淡紅色并且設置1.5rem大小

然而我們的要求是字體大小根據(jù) data-weight 而來的，怎么實現(xiàn)呢？

web標準有一種方式是CSS可以通過 attr() 方法讀取HTML的data屬性值，所以我們可以通過以下方式讀取 data-weight

attr([attribute-name] [attribute-unit]? [, default-value]?)

不幸的是，目前任何瀏覽器均不支持該表示法和功能。相反，attr（）將僅返回一個字符串，并且只能在content屬性中使用。

如果web標準支持這種做法，那好辦，我們可以直接讀取屬性權重的數(shù)據(jù)，將它們保存到CSS變量中，并直接對其進行操作，如下所示：

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);
  /* ... */
}

為了避免將字體大小直接設置成權重導致太大，因此通過一定的方法計算，結果顯示如下：

現(xiàn)在看來已經(jīng)小有成就。

為標簽添加權重顯示

我們常見的標簽云效果在標簽的旁邊都有權重顯示，權重已經(jīng)有了，我們要將它展示在偽元素 ::after 的content中

ul.cloud[data-show-value] a::after {
  content: " (" attr(data-weight) ")";
  font-size: 1rem;
}

然后還需要給 ul 元素增加 [data-show-value] 屬性選擇器，將它的值設為true或者false來控制標簽后面的數(shù)字權重是否顯示

注意： data-show-value 屬性選擇器的值為布爾值，即使你設置為false，它也會顯示，如果不讓它顯示，就移除該屬性

這是顯示數(shù)字權重的效果

下面的案例中將不顯示標簽旁邊的數(shù)字

為標簽云添加顏色

所有的標簽一個顏色看起來很沉悶，我們將嘗試用兩種不同的方法來為它添加不同的顏色。

使用隨機生成的顏色

在CSS中沒有隨機數(shù)這么一說（雖然可以模擬出來）。我們將要做的是根據(jù)標簽的序列號來給它定義不同的顏色，方法如下：

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; }

通過這種方式我們給它添加了綠色，藍色和紫色代替了之前的淡紅色，雖然也不是完全隨機（有一定的規(guī)律在），但是用戶很難發(fā)現(xiàn)。

使用同一種顏色的不同透明度值

我們通過增加標簽對比度來達到強調受歡迎程度的效果，在淺色背景下，使用深色更加明顯。

HSL格式的顏色值可以實現(xiàn)，但是我們采用最快的方式，直接對標簽設置透明度，透明度的值根據(jù)權重值計算而來：

看下變化后的效果

定義它的輪廓

當我們觸摸標簽的時候 outline 樣式會比較重要，尤其對于殘障人士在可訪問性方面。

我們將給 outline 添加和標簽字體顏色一致的邊框

ul.cloud a:focus {
  outline: 1px dashed;
}

在這里我們是通過鼠標點擊事件去模擬的

添加動態(tài)效果

為了增加交互性，我們?yōu)樗砑右粋€簡單的動畫：當用戶將鼠標移動或者懸停在一個標簽上時，標簽的背景色變換并且有一個水平展開的效果。

因為它是取決于狀態(tài)的動畫，所以我們將使用transition而不是animation動畫。

實現(xiàn)方式是通過 a 標簽的偽元素::before的寬度值變化，在focus和hover狀態(tài)下從0變?yōu)?00%來達到這樣一個微交互。

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%;
}

對于動畫效果：用戶不能根據(jù)自己的喜好來開啟或者關閉。如果真是一個需求的話，我們還是要尊重用戶的喜好移除動畫的。

可以通過媒體查詢特性 prefers-reduced-motion 來達到https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

@media (prefers-reduced-motion) {
  ul.cloud * {
    transition: none !important;
  }
}

那么在辛苦看完這篇文章之后相信大家對于：“在前端中實現(xiàn)標簽云效果？”這個問題也有了不少的了解，更多有關于html5這方面的相關內容我們都能在W3Cschool找到相關內容進行學習！

HTML5

2 人點贊

在前端中實現(xiàn)標簽云效果？使用HTML和CSS實現(xiàn)案例分享！