小编给大家分享一下如何使用HTML和CSS实现标签云效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

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

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

<ul><li><ahref="/tag/word1">Word1</a></li><li><ahref="/tag/word2">Word2</a></li><li><ahref="/tag/word3">Word3</a></li><!--...--></ul>

每个标签的权重要提前算好，然后把它加到 <a> 上或者 <li> 上，我们就暂且把它加到链接上。

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

<ul><li><ahref="/tag/word1"data-weight="3">Word1</a></li><li><ahref="/tag/word2"data-weight="7">Word2</a></li><li><ahref="/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代替导航标签来指向导航标题。

让我们来完善一下列表数据，添加一些和开发相关的名词作为标签，这样看起来更贴近实际一点。

<ulclass="cloud"role="navigation"aria-label="Webdevtagcloud"><li><adata-weight="4"href="/tag/http">HTTP</a></li><li><adata-weight="2"href="/tag/ember">Ember</a></li><li><adata-weight="5"href="/tag/sass">Sass</a></li><li><adata-weight="8"href="/tag/html">HTML</a></li><li><adata-weight="6"href="/tag/flexbox">FlexBox</a></li><li><adata-weight="4"href="/tag/api">API</a></li><li><adata-weight="5"href="/tag/vuejs">VueJS</a></li><li><adata-weight="6"href="/tag/grid">Grid</a></li><li><adata-weight="3"href="/tag/rest">Rest</a></li><li><adata-weight="9"href="/tag/javascript">JavaScript</a></li><li><adata-weight="3"href="/tag/animation">Animation</a></li><li><adata-weight="7"href="/tag/react">React</a></li><li><adata-weight="8"href="/tag/css">CSS</a></li><li><adata-weight="1"href="/tag/cache">Cache</a></li><li><adata-weight="3"href="/tag/less">Less</a></li></ul>

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

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

以下是我们要通过添加样式解决的：

让标签以行内元素显示

让每个标签的font-size属性根据 data-weight 大小显示

在标签的右边加上权重

让标签的颜色随机显示

给标签添加:hover和:focus动态样式

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

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

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

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

ul.clouda{color:#a33;display:block;font-size:1.5rem;padding:0.125rem0.25rem;text-decoration:none;position:relative;}

通过上面的样式，所有的标签变成淡红色并且设置1.5rem大小

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

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

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

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

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

ul.clouda{--size:attr(data-weightnumber,2);font-size:calc(var(--size)*1rem);}

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

ul.clouda[data-weight="1"]{--size:1;}ul.clouda[data-weight="2"]{--size:2;}ul.clouda[data-weight="3"]{--size:3;}ul.clouda[data-weight="4"]{--size:4;}ul.clouda[data-weight="5"]{--size:5;}ul.clouda[data-weight="6"]{--size:6;}ul.clouda[data-weight="7"]{--size:7;}ul.clouda[data-weight="8"]{--size:8;}ul.clouda[data-weight="9"]{--size:9;}ul.clouda{--size:4;font-size:calc(var(--size)*0.25rem+0.5rem);/*...*/}

为了避免将字体大小直接设置成权重导致太大，因此通过一定的方法计算，结果显示如下：

现在看来已经小有成就。

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

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

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

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

这是显示数字权重的效果

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

所有的标签一个颜色看起来很沉闷，我们将尝试用两种不同的方法来为它添加不同的颜色。

使用随机生成的颜色

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

ul.cloudli:nth-child(2n+1)a{--color:#181;}ul.cloudli:nth-child(3n+1)a{--color:#33a;}ul.cloudli:nth-child(4n+1)a{--color:#c38;}

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

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

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

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

看下变化后的效果

当我们触摸标签的时候 outline 样式会比较重要，尤其对于残障人士在可访问性方面。

我们将给 outline 添加和标签字体颜色一致的边框

ul.clouda:focus{outline:1pxdashed;}

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

为了增加交互性，我们为它添加一个简单的动画：当用户将鼠标移动或者悬停在一个标签上时，标签的背景色变换并且有一个水平展开的效果。

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

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

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

ul.clouda::before{content:"";position:absolute;top:0;left:50%;width:0;height:100%;background:var(--color);transform:translate(-50%,0);opacity:0.15;transition:width0.25s;}ul.clouda:focus::before,ul.clouda:hover::before{width:100%;}

对于动画效果：用户不能根据自己的喜好来开启或者关闭。如果真是一个需求的话，我们还是要尊重用户的喜好移除动画的。

可以通过媒体查询特性 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;}}

以上是“如何使用HTML和CSS实现标签云效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！