几年前，在中经常出现一个Flash版的标签云 – wp-cumulus，我们都知道 Flash对资源的耗费很大， 今天我们介绍的这个3D旋转标签云完全使用JS代码编写，很小只有几K，加载很快。
具体效果请看下面的截图：
下面介绍一下实现方法：
1. 下载3D旋转标签云效果脚本
注：这个3D旋转标签云有两种效果的JS文件，可以都下载下来测试一下效果。
nofollow">3D旋转标签云效果二文件
2. 切换到主题目录，打开 header.PHP文件，加载代码
Crayon-5c891d405299e222620572" class="
Crayon-
Syntax Crayon-theme-classic
Crayon-font-monaco
Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mou
SEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
Crayon-toolbar" data-settings=" mou
SEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">
Crayon-title">Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">
Crayon-mixed-highlight" title="Contains Mixed Languages">Crayon-button
Crayon-nums-button" title="Toggle Line Numbers">
Crayon-button-icon">
Crayon-button
Crayon-plain-button" title="Toggle Plain Code">
Crayon-button-icon">
Crayon-button
Crayon-wrap-button" title="Toggle Line Wrap">
Crayon-button-icon">
Crayon-button
Crayon-expand-button" title="Expand Code">
Crayon-button-icon">
Crayon-button
Crayon-copy-button" title="Copy">
Crayon-button-icon">
Crayon-button
Crayon-popup-button" title="Open Code In New Window">
Crayon-button-icon">
Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">
Crayon-plain-wrap">
Crayon-main" style="">
Crayon-table">Crayon-row">Crayon-nums " data-settings="show">Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"> Crayon-num" data-line=" Crayon-5c891d405299e222620572-1">1 Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> Crayon-line" id=" Crayon-5c891d405299e222620572-1"> Crayon-ta">3. 将下面的样式添加到主题style.css的最后 Crayon-5c891d40529a8948539755" class=" Crayon- Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mou SEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"> Crayon-toolbar" data-settings=" mou SEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"> Crayon-title">style.cssCrayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"> Crayon-button Crayon-nums-button" title="Toggle Line Numbers"> Crayon-button-icon"> Crayon-button Crayon-plain-button" title="Toggle Plain Code"> Crayon-button-icon"> Crayon-button Crayon-wrap-button" title="Toggle Line Wrap"> Crayon-button-icon"> Crayon-button Crayon-expand-button" title="Expand Code"> Crayon-button-icon"> Crayon-button Crayon-copy-button" title="Copy"> Crayon-button-icon"> Crayon-button Crayon-popup-button" title="Open Code In New Window"> Crayon-button-icon"> Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"> Crayon-plain-wrap"> Crayon-main" style=""> Crayon-table">Crayon-row">Crayon-nums " data-settings="show">Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"> Crayon-num" data-line=" Crayon-5c891d40529a8948539755-1">1 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-2">2 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-3">3 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-4">4 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-5">5 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-6">6 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-7">7 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-8">8 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-9">9 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-10">10 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-11">11 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-12">12 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-13">13 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-14">14 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-15">15 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-16">16 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-17">17 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-18">18 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-19">19 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-20">20 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-21">21 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-22">22 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-23">23 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-24">24 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-25">25 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-26">26 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-27">27 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-28">28 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-29">29 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-30">30 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-31">31 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-32">32 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-33">33 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-34">34 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-35">35 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-36">36 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-37">37 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a8948539755-38">38 Crayon-num" data-line=" Crayon-5c891d40529a8948539755-39">39 Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> Crayon-line" id=" Crayon-5c891d40529a8948539755-1"> Crayon-p">#tag_cloud-2 {Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-2"> Crayon-h">Crayon-v">positionCrayon-o">:Crayon-v">relativeCrayon-sy">;Crayon-line" id=" Crayon-5c891d40529a8948539755-3"> Crayon-h">Crayon-v">heightCrayon-o">:Crayon-cn">340pxCrayon-sy">;Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-4"> Crayon-h">Crayon-v">marginCrayon-o">:Crayon-h"> Crayon-cn">10pxCrayon-h"> Crayon-i">autoCrayon-h"> Crayon-cn">0Crayon-sy">;Crayon-line" id=" Crayon-5c891d40529a8948539755-5"> Crayon-sy">}Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-6"> Crayon-p">#tag_cloud-2 a {Crayon-line" id=" Crayon-5c891d40529a8948539755-7"> Crayon-h">Crayon-v">positionCrayon-o">:Crayon-v">absoluteCrayon-sy">;Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-8"> Crayon-h">Crayon-v">colorCrayon-o">:Crayon-h"> Crayon-p">#fff;Crayon-line" id=" Crayon-5c891d40529a8948539755-9"> Crayon-h">Crayon-v">textCrayon-o">-Crayon-v">alignCrayon-o">:Crayon-h"> Crayon-v">centerCrayon-sy">;Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-10"> Crayon-h">Crayon-v">textCrayon-o">-Crayon-v">overflowCrayon-o">:Crayon-h"> Crayon-v">ellipsisCrayon-sy">;Crayon-line" id=" Crayon-5c891d40529a8948539755-11"> Crayon-h">Crayon-v">whitewhiteCrayon-o">-Crayon-v">spaceCrayon-o">:Crayon-h"> Crayon-v">nowrapCrayon-sy">;Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-12"> Crayon-h">Crayon-v">topCrayon-o">:Crayon-cn">0pxCrayon-sy">;Crayon-line" id=" Crayon-5c891d40529a8948539755-13"> Crayon-h">Crayon-v">leftCrayon-o">:Crayon-cn">0pxCrayon-sy">;Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-14"> Crayon-h">Crayon-v">paddingCrayon-o">:Crayon-h"> Crayon-cn">3pxCrayon-h"> Crayon-cn">5pxCrayon-sy">;Crayon-line" id=" Crayon-5c891d40529a8948539755-15"> Crayon-h">Crayon-v">borderCrayon-o">:Crayon-h"> Crayon-v">noneCrayon-sy">;Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-16"> Crayon-sy">}Crayon-line" id=" Crayon-5c891d40529a8948539755-17"> Crayon-p">#tag_cloud-2 a:hover {Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-18"> Crayon-h">Crayon-v">backgroundCrayon-o">:Crayon-h"> Crayon-p">#d02f53;Crayon-line" id=" Crayon-5c891d40529a8948539755-19"> Crayon-h">Crayon-v">displayCrayon-o">:Crayon-h"> Crayon-v">blockCrayon-sy">;Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-20"> Crayon-sy">}Crayon-line" id=" Crayon-5c891d40529a8948539755-21"> Crayon-p">#tag_cloud-2 a:nth-child(n) {Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-22"> Crayon-h">Crayon-v">backgroundCrayon-o">:Crayon-h"> Crayon-p">#666;Crayon-line" id=" Crayon-5c891d40529a8948539755-23"> Crayon-h">Crayon-v">borderCrayon-o">-Crayon-v">radiusCrayon-o">:Crayon-h"> Crayon-cn">3pxCrayon-sy">;Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-24"> Crayon-h">Crayon-v">displayCrayon-o">:Crayon-h"> Crayon-v">inlineCrayon-o">-Crayon-v">blockCrayon-sy">;Crayon-line" id=" Crayon-5c891d40529a8948539755-25"> Crayon-h">Crayon-v">lineCrayon-o">-Crayon-v">heightCrayon-o">:Crayon-h"> Crayon-cn">18pxCrayon-sy">;Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-26"> Crayon-h">Crayon-v">marginCrayon-o">:Crayon-h"> Crayon-cn">0Crayon-h"> Crayon-cn">10pxCrayon-h"> Crayon-cn">15pxCrayon-h"> Crayon-cn">0Crayon-sy">;Crayon-line" id=" Crayon-5c891d40529a8948539755-27"> Crayon-sy">}Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-28"> Crayon-p">#tag_cloud-2 a:nth-child(2n) {Crayon-line" id=" Crayon-5c891d40529a8948539755-29"> Crayon-h">Crayon-v">backgroundCrayon-o">:Crayon-h"> Crayon-p">#d1a601;Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-30"> Crayon-sy">}Crayon-line" id=" Crayon-5c891d40529a8948539755-31"> Crayon-p">#tag_cloud-2 a:nth-child(3n) {Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-32"> Crayon-h">Crayon-v">backgroundCrayon-o">:Crayon-h"> Crayon-p">#286c4a;Crayon-line" id=" Crayon-5c891d40529a8948539755-33"> Crayon-sy">}Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-34"> Crayon-p">#tag_cloud-2 a:nth-child(5n) {Crayon-line" id=" Crayon-5c891d40529a8948539755-35"> Crayon-h">Crayon-v">backgroundCrayon-o">:Crayon-h"> Crayon-p">#518ab2;Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-36"> Crayon-sy">}Crayon-line" id=" Crayon-5c891d40529a8948539755-37"> Crayon-p">#tag_cloud-2 a:nth-child(4n) {Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a8948539755-38"> Crayon-h">Crayon-v">backgroundCrayon-o">:Crayon-h"> Crayon-p">#c91d13;Crayon-line" id=" Crayon-5c891d40529a8948539755-39"> Crayon-sy">}4. 修改对应选择器名称
比较麻烦点的是，其中 #tag_cloud-2 需根据不同情况加以修改，比如查看标签云小工具的网页源代码显示的是： Crayon-5c891d40529a9269424780" class=" Crayon- Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mou SEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"> Crayon-toolbar" data-settings=" mou SEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"> Crayon-title">Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"> Crayon-button Crayon-nums-button" title="Toggle Line Numbers"> Crayon-button-icon"> Crayon-button Crayon-plain-button" title="Toggle Plain Code"> Crayon-button-icon"> Crayon-button Crayon-wrap-button" title="Toggle Line Wrap"> Crayon-button-icon"> Crayon-button Crayon-expand-button" title="Expand Code"> Crayon-button-icon"> Crayon-button Crayon-copy-button" title="Copy"> Crayon-button-icon"> Crayon-button Crayon-popup-button" title="Open Code In New Window"> Crayon-button-icon"> Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"> Crayon-plain-wrap"> Crayon-main" style=""> Crayon-table">Crayon-row">Crayon-nums " data-settings="show">Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"> Crayon-num" data-line=" Crayon-5c891d40529a9269424780-1">1 Crayon-num Crayon-striped-num" data-line=" Crayon-5c891d40529a9269424780-2">2 Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> Crayon-line" id=" Crayon-5c891d40529a9269424780-1"> Crayon-o"><Crayon-e">aside Crayon-v">idCrayon-o">=Crayon-s">"tag_cloud-3"Crayon-h"> Crayon-t">classCrayon-o">=Crayon-s">"widget widget_tag_cloud"Crayon-line Crayon-striped-line" id=" Crayon-5c891d40529a9269424780-2"> Crayon-o"><Crayon-e">h2 Crayon-t">classCrayon-o">=Crayon-s">"widget-title"标签Crayon-o"><Crayon-o">/Crayon-v">h2需要将 #tag_cloud-2 修改为 #tag_cloud-3，同时将3d.js中的 tag_cloud-2 也改为 tag_cloud-3 。 这个3D旋转标签云本身是支持低版本IE的，不过本例中配套的样式使用了CSS3特效，所以在低版本IE上标签背影色会不显示。
相关文章
WordPress是一种使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的...
这两段代码可以让你先体验一下WordPress 3.0的菜单样式 首先在functions.php添加如下代码： register_n...
有人说 WordPress 本身的 SEO 就比较好，我想这个和 WordPress 可以方便的自定义文章的固定链接有分不开...
曾经给大家介绍了在 WordPress 后台移除主题编辑器，今天继续加深，直接关闭 WordPress 后台的文件编辑...
WordPress之iNove主题内容页增加公告栏的方法，导航栏下面默认的公告栏只能在首页显示，只要修改一个文...
大多数WordPress用户都知道该怎么从数千个WordPress主题里挑出自己喜欢，但要自己开发新主题恐怕不是人...
| | |
