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;
}
本文链接:https://www.yunweipai.com/328.html
效果相当炫啊
个人博客的话 挺配的……
非常不错哦。支持下。已友链
效果不错啊~~
[…] 动态效果预览: http://blog.tektea.com/archives/328.html […]
非常好,我的博客已经在用了,感谢!
好文留名,原来只用css就可以实现啊
挺好,不过tag太多了,就放不下了,之前见过可以飘来飘去的,节省很多空间,现在找不到了。