加入社区

订阅:www.yunweipai.com/feed

QQ群:
1群:201777608 - 运维综合
2群:526871767 - 运维综合
3群:1689067 - Linux Shell脚本

微博:weibo.com/tektea

微信:yunweipai(或扫描以下二维码)

合作伙伴

小猪动图 - GIF动图素材库_GIF在线工具

使用css实现wordpress多彩酷炫tags的特效

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

转载请注明:运维派 » 使用css实现wordpress多彩酷炫tags的特效

0
3.7k
8
  1. Pingback: 使用CSS实现wordpress多彩酷炫tags的特效 - WordPress - 开发者