wordpress中的標籤雲是最常用的小工具之一，也因此推展出了各種展示風格，還有彙集部落格所有標籤的“標籤牆”，部落格的標籤可以幫助博主和讀者快速瞭解這個部落格的主要話題，這篇文章主要給大家介紹TekTea’s Blog所採用的標籤雲風格，命名為“多彩酷炫Tags”，下面給大家分享下如何實現……

PS：驗證相容的瀏覽器：IE8以上, FireFox, Safari（在360瀏覽器上無動態特效，忽略之），也請大家測試。

一、特效說明：
1. 預設定義了三種色調，對所有tags隨機均勻分配；
2. 滑鼠移動到標籤上，會實現動態凸顯和微旋轉的效果，具體演示請參見本站的標籤雲。

二、實現方法：
1. 首先在wp後臺“外觀 > 小工具”啟用wp自帶預設的標籤雲功能（我除錯多個模版，都是OK的）；
2. 然後將以下CSS程式碼寫入你當前模版下的style.css中：

.tagcloud {
padding-left: 5px;
}
.widget_tag_cloud a, .almeros_tags a {
-moz-transform: rotate(0deg);
-moz-transition: -moz-transform 0.1s ease-in 0s;
background-color: #EC745C;
box-shadow: 0 0 1px #999999;
color: #FFFFFF !important;
display: inline-block;
float: none;
font-family: "Century Gothic",Verdana,Tahoma,Arial,"Microsoft Yahei";
font-style: normal;
font-weight: bold;
margin: 2px 1px;
padding: 2px 3px;
text-decoration: none;
text-shadow: 1px 0 rgba(0, 0, 0, 0.2), 0 1px rgba(0, 0, 0, 0.2), -1px 0 rgba(255, 255, 255, 0.2), 0 -1px rgba(255, 255, 255, 0.2), 1px 1px rgba(0, 0, 0, 0.2), -1px -1px rgba(255, 255, 255, 0.2);
}
.widget_tag_cloud a:hover, .almeros_tags a:hover {
-moz-transform: rotate(3deg) scale(1.2);
background-color: #0C92DA;
box-shadow: 0 0 10px #000032;
color: #FFFFFF !important;
}
.widget_tag_cloud a:nth-child(2n), .almeros_tags a:nth-child(2n) {
-moz-transform: rotate(0deg);
background-color: #FF9F51;
}
.widget_tag_cloud a:nth-child(2n):hover, .almeros_tags a:nth-child(2n):hover {
-moz-transform: rotate(-3deg) scale(1.2);
background-color: #0C92DA;
}
.widget_tag_cloud a:nth-child(4n), .almeros_tags a:nth-child(4n) {
-moz-transform: rotate(0deg);
background-color: #9AB9E4;
}
.widget_tag_cloud a:nth-child(4n):hover, .almeros_tags a:nth-child(4n):hover {
-moz-transform: rotate(3deg) scale(1.2);
background-color: #0C92DA;
}
.widget_tag_cloud a:nth-child(5n), .almeros_tags a:nth-child(5n) {
-moz-transform: rotate(0deg);
background-color: #9AB9D4;
}
.widget_tag_cloud a:nth-child(5n):hover, .almeros_tags a:nth-child(5n):hover {
-moz-transform: rotate(2deg) scale(1.2);
background-color: #0C92DA;
}