这个3D标签云可不是N年前的那个Flash版的 wp-cumulus, 这个3D旋转标签云完全使用JS代码编写,很小只有几K,不用担心像垃圾Flash对资源的耗费。
具体效果看本文的侧边栏标签云。
下面以WordPress默认主题Twenty Fifteen为例,将这个炫酷的特效加到你的博客上。
一,添加生成3D效果的脚本
将下载的3d.js脚本放到Twenty Fifteen主题js目录中。
3d.js下载
注:这个3D旋转标签云有两种效果的JS文件,我用的是第二种。
打开Twenty Fifteen主题 functions.php 模板文件,在大约252行,添加:
- wp_enqueue_script( \’3d\’, get_template_directory_uri() . \’/js/3d.js\’ );
或者直接将下面代码加到主题header模板
- <script type= src=></script>
二,添加样式
将下面的样式添加到主题style.css的最后即可:
- _cloud-2 {
- :;
- :;
- : 0;
- }
- _cloud-2 a {
- :;
- : ;
- : ;
- text-: ellipsis;
- : ;
- :;
- :;
- : ;
- : ;
- }
- _cloud-2 a:hover {
- : ;
- : ;
- }
- _cloud-2 a:nth-child(n) {
- : ;
- -radius: ;
- : -;
- : ;
- : 0 0;
- }
- _cloud-2 a:nth-child(2n) {
- : ;
- }
- _cloud-2 a:nth-child(3n) {
- : ;
- }
- _cloud-2 a:nth-child(5n) {
- : ;
- }
- _cloud-2 a:nth-child(4n) {
- : ;
- }
三、修改对应选择器名称
比较麻烦点的是,其中 #_cloud-2 需根据不同情况加以修改,比如查看标签云小工具的网页源代码显示的是:
- <aside id=\” =>
- <h2 =>标签</h2>
你就需要将 #_cloud-2改为#_cloud-3,同时将3d.js中的tag_cloud-2也改为tag_cloud-3.
这个3D旋转标签云本身是支持低版本IE的,不过本例中配套的样式使用了CSS3特效,所以在低版本IE上标签背影色会不显示。
JS源代码:来自互联网
暂无评论内容