首页 运维杂谈使用css实现wordpress多彩酷炫tags的特效

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

运维派隶属马哥教育旗下专业运维社区,是国内成立最早的IT运维技术社区,欢迎关注公众号:yunweipai
领取学习更多免费Linux云计算、Python、Docker、K8s教程关注公众号:马哥linux运维

wordpress中的标签云是最常用的小工具之一,也因此推展出了各种展示风格,还有汇集博客所有标签的“标签墙”,博客的标签可以帮助博主和读者快速了解这个博客的主要话题,这篇文章主要给大家介绍TekTea’s Blog所采用的标签云风格,命名为“多彩酷炫Tags”,下面给大家分享下如何实现……

PS:验证兼容的浏览器:IE8以上, FireFox, Safari(在360浏览器上无动态特效,忽略之),也请大家测试。

一、特效说明:
1. 默认定义了三种色调,对所有tags随机均匀分配;
2. 鼠标移动到标签上,会实现动态凸显和微旋转的效果,具体演示请参见本站的标签云。
使用css实现wordpress多彩酷炫tags的特效插图

二、实现方法:
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

网友评论comments

回复 小蜜蜂 取消回复

您的电子邮箱地址不会被公开。

  1. galab说道:

    效果相当炫啊

  2. 电脑爱好者说道:

    个人博客的话 挺配的……

  3. 云淡然说道:

    非常不错哦。支持下。已友链

  4. carl说道:

    效果不错啊~~

  5. 小蜜蜂说道:

    非常好,我的博客已经在用了,感谢!

  6. Youth.霖说道:

    好文留名,原来只用css就可以实现啊

  7. 屌丝醒神砖说道:

    挺好,不过tag太多了,就放不下了,之前见过可以飘来飘去的,节省很多空间,现在找不到了。

Copyright © 2012-2022 YUNWEIPAI.COM - 运维派 京ICP备16064699号-6
扫二维码
扫二维码
返回顶部