css3网页云标签特效

CSS3网页云标签特效是当前网页设计中非常流行的一种设计方式，它能够通过CSS3的各种特效属性来实现文字标签的动态效果展示，让网页更加生动、有趣。

.tag-cloud{
   width: 100%;
   height: 300px;
   background-color: #EFEFEF;
   position: relative;
}

.tag-cloud ul{
   list-style: none;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

.tag-cloud li{
   display: inline-block;
   margin: 0 10px;
   font-size: 16px;
   line-height: 36px;
   transition: all 0.3s ease-in-out;
}

.tag-cloud li:hover{
   transform: scale(1.2);
}

.tag-cloud li:hover span{
   color: #fff;
}

.tag-cloud li span{
   display: inline-block;
   padding: 4px 10px;
   border-radius: 3px;
   background-color: #666;
   color: #fff;
   transition: all 0.3s ease-in-out;
}

首先要在网页的HTML代码中添加一个div容器，这个容器的class设置为tag-cloud，再在这个容器中添加一个无序列表，列表项使用li标签。

然后在CSS代码中设置tag-cloud的宽度、高度、背景颜色和相对定位。在ul标签中设置居中显示，即top: 50%;left：50%;transform: translate(-50%,-50%)。接下来配置每个li标签为内联元素，设置外边距、字体大小、字体行高和动画过渡属性。

然后添加一个鼠标悬停事件，触发li元素放大的动画效果。同时通过hover伪类，控制li内的span标签，改变字体颜色和背景颜色，实现标签的动态效果。

最后，将CSS代码应用到HTML中，就能够实现一个简单的CSS3网页云标签特效了。