使用HTML和CSS实现的标签云效果(附demo)

标签云的效果在博客和网站上不难见到，它实在就是带有超链接的某些关键字，为了达到强调主题的作用。通常出现概率比力大大概受接待的标签文字显示比力大，相反的就显示的小。

泉源于TagCrowd.com

我们就不去深入研究标签云带来的效率上的提拔和可用性的细节，仅仅在外观上带来的美感和对全站或一整篇文章所起到的高度概括的作用就不容忽视了。

接下来，我们将讨论怎样用HTML和CSS来创建标签云效果。注意，我们仅仅讨论怎样实现这种UI效果而不去深究标签的权重或受接待程度是怎么算出来的。

HTML基础结构

前面说了，标签云就是一个毗连列表。所以从语义化的视角，使用无序列表来表达每个标签是合理的，不消考虑按接待程度去分列，否则就毫偶尔义了。

在每个列表项里包含一个超链接标签，所以大体结构就是下面的样子：

每个标签的权紧张提前算好，然后把它加到 [code]<a>[/code] 上大概 [code]<li>[/code] 上，我们就临时把它加到链接上。

权重大的标签对应显示的文字也大，代表了它的受接待程度大。

注意：这里的data-weight是通过data-count和data-total盘算而来的，这里没办法直接通过两个属性盘算体现，所以我们把目标聚焦在data-weight这样一个属性上。

这样基础的HTML结构代码就写好了，只要稍加一些属性就完美了。

• class：有助于在添加样式的时间确定是哪个标签云
• role：这个是一个导航组件，在屏幕阅读器上标识和辅助作用
• aria-label：给辅助功能添加标题和形貌

注意：假如列表位于 [code]<nav>[/code] 标签内，就不必要添加 [code]role="navigation"[/code] ，可以使用aria-labelledby代替导航标签来指向导航标题。

让我们来美满一下列表数据，添加一些和开辟相干的名词作为标签，这样看起来更贴近现实一点。

下面是标签云现在看起来的效果：

这是还没有添加任何样式的效果，然后给它添加一些样式

给标签云添加样式

以下是我们要通过添加样式办理的：

• 让标签以行内元素显示
• 让每个标签的font-size属性根据 [code]data-weight[/code] 大小显示
• 在标签的右边加上权重
• 让标签的颜色随机显示
• 给标签添加:hover和:focus动态样式

给ul添加样式

起首移除列表前面的小圆点和缩进

然后设置 [code]ul[/code] 以Flexbox显示，并且程度垂直居中保证全部的标签元素在一行大概多行内显示

添加上行高相互之间保持肯定的垂直隔断，终极的ul元素的样式如下：

然而这个时间标签云看起来还差很多

根据权重调整标签的大小

让我们开始给标签一些小的变化

通过上面的样式，全部的标签变成淡赤色并且设置1.5rem大小

然而我们的要求是字体大小根据 [code]data-weight[/code] 而来的，怎么实现呢？

web标准有一种方式是CSS可以通过 [code]attr()[/code] 方法读取HTML的data属性值，所以我们可以通过以下方式读取 [code]data-weight[/code]

不幸的是，目前任何欣赏器均不支持该体现法和功能。相反，attr（）将仅返回一个字符串，并且只能在content属性中使用。

假如web标准支持这种做法，那好办，我们可以直接读取属性权重的数据，将它们保存到CSS变量中，并直接对其进行操作，如下所示：

但是这样不可，我们只能通过CSS规则，属性选择器：data-attribute

为了制止将字体大小直接设置成权重导致太大，因此通过肯定的方法盘算，效果显示如下：

现在看来已经小有成就。

为标签添加权重显示

我们常见的标签云效果在标签的旁边都有权重显示，权重已经有了，我们要将它展示在伪元素 [code]::after[/code] 的content中

然后还必要给 [code]ul[/code] 元素增加 [code][data-show-value][/code] 属性选择器，将它的值设为true大概false来控制标签背面的数字权重是否显示

注意： [code]data-show-value[/code] 属性选择器的值为布尔值，即使你设置为false，它也会显示，假如不让它显示，就移除该属性

这是显示数字权重的效果

下面的案例中将不显示标签旁边的数字

为标签云添加颜色

全部的标签一个颜色看起来很沉闷，我们将实验用两种不同的方法来为它添加不同的颜色。

使用随机天生的颜色

在CSS中没有随机数这么一说（虽然可以模拟出来）。我们将要做的是根据标签的序列号来给它界说不同的颜色，方法如下：

通过这种方式我们给它添加了绿色，蓝色和紫色代替了之前的淡赤色，虽然也不是完全随机（有肯定的规律在），但是用户很难发现。

使用同一种颜色的不同透明度值

我们通过增加标签对比度来达到强调受接待程度的效果，在浅色配景下，使用深色更加显着。

HSL格式的颜色值可以实现，但是我们接纳最快的方式，直接对标签设置透明度，透明度的值根据权重值盘算而来：

看下变化后的效果

界说它的轮廓

当我们触摸标签的时间 [code]outline[/code] 样式会比力紧张，尤其对于残障人士在可访问性方面。

我们将给 [code]outline[/code] 添加和标具名体颜色一致的边框

在这里我们是通过鼠标点击事件去模拟的

添加动态效果

为了增加交互性，我们为它添加一个简单的动画：当用户将鼠标移动大概悬停在一个标签上时，标签的配景色变更并且有一个程度展开的效果。

因为它是取决于状态的动画，所以我们将使用transition而不是animation动画。

实现方式是通过 [code]a[/code] 标签的伪元素::before的宽度值变化，在focus和hover状态下从0变为100%来达到这样一个微交互。

CSS代码和伪元素的状态行为：

对于动画效果：用户不能根据本身的喜好来开启大概关闭。假如真是一个需求的话，我们还是要恭敬用户的喜好移除动画的。

可以通过媒体查询特性 [code]prefers-reduced-motion[/code] 来达到https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

到此这篇关于使用HTML和CSS实现的标签云效果(附demo)的文章就先容到这了,更多相干HTML和CSS标签云内容请搜刮脚本之家以前的文章或继续欣赏下面的相干文章，渴望各人以后多多支持脚本之家！