[HTML5]3D标签云

index.html

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>3D标签云</title> <link rel="stylesheet" type="text/css" href="http://webapplee-wordpress.stor.sinaapp.com/uploads/2013/05/style_3d.css" /> <script type="text/javascript" src="http://webapplee-wordpress.stor.sinaapp.com/uploads/2013/05/3D-Tags.js" > </script> </head> <body> <div id="div1"> <a href="http://webapplee.sinaapp.com/?cat=3" target="_blank" class="black"> Android开发</a> <a href="http://webapplee.sinaapp.com/?cat=9" target="_blank" class="red"> Bug树</a> <a href="http://webapplee.sinaapp.com/?cat=5" target="_blank" class="blue"> EnglishWorld</a> <a href="http://webapplee.sinaapp.com/?cat=4" target="_blank" class="orange"> HTML5开发</a> <a href="http://webapplee.sinaapp.com/?cat=6" target="_blank" class="pink"> Java学习</a> <a href="http://webapplee.sinaapp.com/?cat=15" target="_blank" class="purple"> JS速成</a> <a href="http://webapplee.sinaapp.com/?cat=11" target="_blank" class="green"> Log记录与分析</a> <a href="http://webapplee.sinaapp.com/?cat=13" target="_blank" class="black"> 英语口语学习</a> <a href="http://webapplee.sinaapp.com/?cat=8" target="_blank" class="red"> 转篇之LinuxUbuntu</a> <a href="http://webapplee.sinaapp.com/?cat=16" target="_blank" class="blue"> 课外阅读</a> <a href="http://webapplee.sinaapp.com/?cat=17" target="_blank" class="orange"> GoodboyStyle</a> </div> </body> </html> 

CSS样式表:style_3d.css
JS文件:3D-Tags.js

[HTML5]3D标签云,布布扣,bubuko.com

时间: 2024-10-21 11:20:00

[HTML5]3D标签云的相关文章

怎样在自己的Blog中展现3D标签云效果

在用Wordpress创建自己的Blog后,怎样在自己的Blog中安装绚丽的标签3D云呢?本文将带怎样用插件来实现这个3D标签云的效果. 我用的插件为:3D TagCloud 步骤一:打开Wordpress的编辑页面,选择插件,如下图所示:(http://localhost/wpc/wp-admin/) 步骤二:安装完成之后,启动这个插件. 步骤三:设置配置参数(3D Tag Cloud),详细参数如下图所示: 步骤四:进入Blog文章页面,看实际效果如下图所示:(http://localhos

css3实践之摩天轮式图片轮播+3D正方体+3D标签云(perspective、transform-style、perspective-origin)

本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(css3版 chrome only) 3D标签云(js版 chrome only) 前文回顾 在前面的文章css3实践之图片轮播(Transform,Transition和Animation)中我们简单地了解了css3旗下的transform.transition以及animation.回顾一下,tr

纯JS实现的3D标签云,不依赖任何第三方库,支持移动页面

<span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span> <html xmlns="

SP2010 3D标签云Web部件--酷炫效果,极力推荐!!

SP2010 3D标签云Web部件--酷炫效果,极力推荐!! 项目描述 一个简单的基于Flash的3D标签云Web部件,SP Server 2010使用.建立在内置标签云Web部件和WordPress的Cumulus插件基础上. 它和标准标签云有相同的设置,但是以美妙的3D云效果呈现. 请注意,这个Web部件依靠SP标签功能,只能在SP Server 2010上可用,所以在SP Foundation 2010上是不可用的. wsp下载地址 http://download.csdn.net/det

解析3D标签云,其实很简单

声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近开始用canvas搞3D了,搞得也是简单的东西,就是球体转圈.做出来后,突然想起以前看过的3D标签云,在以前觉得真心狂拽酷炫叼啊,当时也确实不知道怎么在平面上模拟3D,所以也就没去搞了.现在刚好用了canvas搞3D,也发现,好像3D标签云也差不多,然后就写了一下. 具体怎么做呢,先说一下原理,3D标签云就是做一个球面,然后再球面上取均匀分布的点,把点坐标赋给标签,再根据抽象出来的Z轴大小来改变标签的字体大小,透明度,做出立体感觉

jquery 3D 标签云

http://www.gbin1.com/technology/jquerynews/20111205tagcloudbyjquery/index.html 相关选项     zoom: 90 初始的缩放度     min_zoom: 25     max_zoom: 120     zoom_factor: 2 - 鼠标滚轮的缩放速度     rotate_factor: -0.45 - 鼠标移动时球体旋转的数量.正数将反向旋转     fps: 10 - 定义每秒动画更新的次数     ce

3D球状标签云(兼容IE8)

看见一个很有趣的标签云,3D球状,兼容 IE 8,亲测可用!其他版本没有测试.觉得挺有意思就拿来记录下来,学习学习,本文下方会放出我看的文章地址,先看一下效果: 接下来是代码,html + css + js,不是基于jQuery的,所以不需要引入,代码复制下来就可以看到效果: <div id="div1"> <a href="http://www.cnblogs.com/ntt1219/">忘了滋味</a> <a href=

wordpress博客添加3D旋转标签云

为了让自己的博客首页更动感,我们可以添加3D旋转标签云,只需要添加插件即可. 方法如下: 1.登录wp管理后台,选择插件--安装插件,右上角搜索框搜索:WP-Cirrus 找到后选择安装,并启用. 2.外观--小工具--拖动WP-Cirrus到后侧首页功能项里面,保存即可. 3.在WP-Cirrus下拉列表中可以设置标题.标签云的高宽.刷新速度.标签最小值最大值.字体的颜色.背景颜色等等. 4.前提是你的博客中文章设置过标签,否则为空白. 5.刷新首页就能看到旋转的标签云,让你的博客也活泼起来.

Python jquery标签云

很多知名博主都喜欢弄个标签云.今天特地看了下源码.把标签云的方法单独扣了出来.这里做一下记录 html页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q