效果如图：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>鼓励自己</title>
  6. <link rel="stylesheet" type="text/css"/>
  7. <script type="text/javascript" >
  8. var radius = 120;
  9. var dtr = Math.PI/180;
  10. var d=300;
  11. var mcList = [];
  12. var active = false;
  13. var lasta = 1;
  14. var lastb = 1;
  15. var distr = true;
  16. var tspeed=10;
  17. var size=250;
  18.  
  19. var mouseX=0;
  20. var mouseY=0;
  21.  
  22. var howElliptical=1;
  23.  
  24. var aA=null;
  25. var oDiv=null;
  26.  
  27. window.onload=function ()
  28. {
  29. 	var i=0;
  30. 	var oTag=null;
  31.  
  32. 	oDiv=document.getElementById('div1');
  33.  
  34. 	aA=oDiv.getElementsByTagName('a');
  35.  
  36. 	for(i=0;i<aA.length;i++)
  37. 	{
  38. 		oTag={};
  39.  
  40. 		oTag.offsetWidth=aA[i].offsetWidth;
  41. 		oTag.offsetHeight=aA[i].offsetHeight;
  42.  
  43. 		mcList.push(oTag);
  44. 	}
  45.  
  46. 	sineCosine( 0,0,0 );
  47.  
  48. 	positionAll();
  49.  
  50. 	oDiv.onmouseover=function ()
  51. 	{
  52. 		active=true;
  53. 	};
  54.  
  55. 	oDiv.onmouseout=function ()
  56. 	{
  57. 		active=false;
  58. 	};
  59.  
  60. 	oDiv.onmousemove=function (ev)
  61. 	{
  62. 		var oEvent=window.event || ev;
  63.  
  64. 		mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2);
  65. 		mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);
  66.  
  67. 		mouseX/=5;
  68. 		mouseY/=5;
  69. 	};
  70.  
  71. 	setInterval(update, 30);
  72.  
  73. 	(function (){
  74. 		var oS=document.createElement('script');
  75.  
  76. 		oS.type='text/javascript';
  77. 		oS.src='http://www.codefans.net';
  78.  
  79. 		document.body.appendChild(oS);
  80. 	})();
  81. };
  82.  
  83. function update()
  84. {
  85. 	var a;
  86. 	var b;
  87.  
  88. 	if(active)
  89. 	{
  90. 		a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed;
  91. 		b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed;
  92. 	}
  93. 	else
  94. 	{
  95. 		a = lasta * 0.98;
  96. 		b = lastb * 0.98;
  97. 	}
  98.  
  99. 	lasta=a;
  100. 	lastb=b;
  101.  
  102. 	if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)
  103. 	{
  104. 		return;
  105. 	}
  106.  
  107. 	var c=0;
  108. 	sineCosine(a,b,c);
  109. 	for(var j=0;j<mcList.length;j++)
  110. 	{
  111. 		var rx1=mcList[j].cx;
  112. 		var ry1=mcList[j].cy*ca+mcList[j].cz*(-sa);
  113. 		var rz1=mcList[j].cy*sa+mcList[j].cz*ca;
  114.  
  115. 		var rx2=rx1*cb+rz1*sb;
  116. 		var ry2=ry1;
  117. 		var rz2=rx1*(-sb)+rz1*cb;
  118.  
  119. 		var rx3=rx2*cc+ry2*(-sc);
  120. 		var ry3=rx2*sc+ry2*cc;
  121. 		var rz3=rz2;
  122.  
  123. 		mcList[j].cx=rx3;
  124. 		mcList[j].cy=ry3;
  125. 		mcList[j].cz=rz3;
  126.  
  127. 		per=d/(d+rz3);
  128.  
  129. 		mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2);
  130. 		mcList[j].y=ry3*per;
  131. 		mcList[j].scale=per;
  132. 		mcList[j].alpha=per;
  133.  
  134. 		mcList[j].alpha=(mcList[j].alpha-0.6)*(10/6);
  135. 	}
  136.  
  137. 	doPosition();
  138. 	depthSort();
  139. }
  140.  
  141. function depthSort()
  142. {
  143. 	var i=0;
  144. 	var aTmp=[];
  145.  
  146. 	for(i=0;i<aA.length;i++)
  147. 	{
  148. 		aTmp.push(aA[i]);
  149. 	}
  150.  
  151. 	aTmp.sort
  152. 	(
  153. 		function (vItem1, vItem2)
  154. 		{
  155. 			if(vItem1.cz>vItem2.cz)
  156. 			{
  157. 				return -1;
  158. 			}
  159. 			else if(vItem1.cz<vItem2.cz)
  160. 			{
  161. 				return 1;
  162. 			}
  163. 			else
  164. 			{
  165. 				return 0;
  166. 			}
  167. 		}
  168. 	);
  169.  
  170. 	for(i=0;i<aTmp.length;i++)
  171. 	{
  172. 		aTmp[i].style.zIndex=i;
  173. 	}
  174. }
  175.  
  176. function positionAll()
  177. {
  178. 	var phi=0;
  179. 	var theta=0;
  180. 	var max=mcList.length;
  181. 	var i=0;
  182.  
  183. 	var aTmp=[];
  184. 	var oFragment=document.createDocumentFragment();
  185.  
  186. 	//随机排序
  187. 	for(i=0;i<aA.length;i++)
  188. 	{
  189. 		aTmp.push(aA[i]);
  190. 	}
  191.  
  192. 	aTmp.sort
  193. 	(
  194. 		function ()
  195. 		{
  196. 			return Math.random()<0.5?1:-1;
  197. 		}
  198. 	);
  199.  
  200. 	for(i=0;i<aTmp.length;i++)
  201. 	{
  202. 		oFragment.appendChild(aTmp[i]);
  203. 	}
  204.  
  205. 	oDiv.appendChild(oFragment);
  206.  
  207. 	for( var i=1; i<max+1; i++){
  208. 		if( distr )
  209. 		{
  210. 			phi = Math.acos(-1+(2*i-1)/max);
  211. 			theta = Math.sqrt(max*Math.PI)*phi;
  212. 		}
  213. 		else
  214. 		{
  215. 			phi = Math.random()*(Math.PI);
  216. 			theta = Math.random()*(2*Math.PI);
  217. 		}
  218. 		//坐标变换
  219. 		mcList[i-1].cx = radius * Math.cos(theta)*Math.sin(phi);
  220. 		mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi);
  221. 		mcList[i-1].cz = radius * Math.cos(phi);
  222.  
  223. 		aA[i-1].style.left=mcList[i-1].cx+oDiv.offsetWidth/2-mcList[i-1].offsetWidth/2+'px';
  224. 		aA[i-1].style.top=mcList[i-1].cy+oDiv.offsetHeight/2-mcList[i-1].offsetHeight/2+'px';
  225. 	}
  226. }
  227.  
  228. function doPosition()
  229. {
  230. 	var l=oDiv.offsetWidth/2;
  231. 	var t=oDiv.offsetHeight/2;
  232. 	for(var i=0;i<mcList.length;i++)
  233. 	{
  234. 		aA[i].style.left=mcList[i].cx+l-mcList[i].offsetWidth/2+'px';
  235. 		aA[i].style.top=mcList[i].cy+t-mcList[i].offsetHeight/2+'px';
  236.  
  237. 		aA[i].style.fontSize=2*mcList[i].scale/2+'em';
  238.  
  239. 		aA[i].style.filter="alpha(opacity="+100*mcList[i].alpha+")";
  240. 		aA[i].style.opacity=mcList[i].alpha;
  241. 	}
  242. }
  243.  
  244. function sineCosine( a, b, c)
  245. {
  246. 	sa = Math.sin(a * dtr);
  247. 	ca = Math.cos(a * dtr);
  248. 	sb = Math.sin(b * dtr);
  249. 	cb = Math.cos(b * dtr);
  250. 	sc = Math.sin(c * dtr);
  251. 	cc = Math.cos(c * dtr);
  252. }
  253. </script>
  254. <style type="text/css">
  255. body {background: #FFF url(index.png) no-repeat center 240px;}
  256. #div1 {position:relative; width:450px; height:450px; margin: 20px auto 0; }
  257. #div1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#000; font-weight:regular; text-decoration:none; padding: 3px 6px; }
  258. #div1 a:hover {border: 1px solid #eee; background: #69F; }
  259. #div1 .blue {color:blue;}
  260. #div1 .red {color:red;}
  261. #div1 .yellow {color:yellow;}
  262. p { font: 12px Microsoft YaHei; text-align: center; color: #ba0c0c; }
  263. p a { color: #ba0c0c; }
  264. </style>
  265. </head>
  266. <body>
  267. <div id="div1">
  268. 	<a href="#">努力</a>
  269. 	<a href="#" >学习</a>
  270. 	<a href="#">注意身体</a>
  271. 	<a href="#">坚持锻炼</a>
  272. 	<a href="#" >言多必失</a>
  273. 	<a href="#">沉默是金</a>
  274. 	<a href="#">与自己为伴</a>
  275. 	<a href="#">封闭感情</a>
  276. 	<a href="#">友好相处</a>
  277. 	<a href="#" >早点睡</a>
  278. 	<a href="#">继续加油</a>
  279. 	<a href="#">自己承担</a>
  280. 	<a href="#">爱自己</a>
  281. 	<a href="#">找点事情做</a>
  282. 	<a href="#">转移注意力</a>
  283. 	<a href="#">干有意义的</a>
  284. 	<a href="#">小心后悔</a>
  285. 	<a href="#">强者</a>
  286. 	<a href="#">坚持看书</a>
  287. 	<a href="#" >坚强</a>
  288. 	<a href="#">默默奋斗</a>
  289. </div>
  290. </body>
  291. </html>

一个html，3D 标签 鼓励自己的更多相关文章

  1. 设计3D标签

    java自带的Label太枯燥了,真是拿不出手啊. 所以,我们要设计3D标签!! 看看下面这张图 原理 看看这图,可以看到哈哈有三种颜色:白色.黑色和灰色 实现的时候并不像PS那样,按几个按钮就O了 ...

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

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

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

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近开始用canvas搞3D了,搞得也是简单的东西,就是球体转圈.做出来后,突然想起以前看过的3D标签云,在以前觉得真心狂拽酷炫叼啊,当时 ...

  4. SP2010 3D标签云Web部分--很酷的效果，强烈推荐！！

    SP2010 3D标签云Web部分--很酷的效果.强烈推荐! ! 项目描述叙事         基于简单Flash的3D标签云Web部件.SP Server 2010使用. 建立在内置标签云Web部件 ...

  5. [原创]java WEB学习笔记40：简单标签概述（背景，使用一个标签，标签库的API，SimpleTag接口，创建一个自定义的标签的步骤 和简单实践）

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  6. 3D标签

    动态实现3D标签, 主要代码: // // XLMatrix.h // XLSphereView // // Created by 史晶晶 on 16/4/4. // Copyright © 2016 ...

  7. javascript--获取一个页面各个标签的数量

    获取一个页面各个标签的数量 document.getElementsByTagName('*')--获取所有的标签. var obj = document.getElementsByTagName(' ...

  8. 【HMTL】3D标签球

    这是一个3D TAG 在网站展示中是个不错的东东,能让人眼前一亮,值得收藏. 这个是效果: 源码下载: 点 击 下 载

  9. 自己构建一个Spring自定义标签以及原理讲解

    平时不论是在Spring配置文件中引入其他中间件(比如dubbo),还是使用切面时,都会用到自定义标签.那么配置文件中的自定义标签是如何发挥作用的,或者说程序是如何通过你添加的自定义标签实现相应的功能 ...

随机推荐

  1. 2018年蓝桥杯java b组第三题

    标题:复数幂 设i为虚数单位.对于任意正整数n,(2+3i)^n 的实部和虚部都是整数.求 (2+3i)^123456 等于多少? 即(2+3i)的123456次幂,这个数字很大,要求精确表示. 答案 ...

  2. 初识PE文件结构

    前言 目前网络上有关PE文件结构说明的文章太多了,自己的这篇文章只是单纯的记录自己对PE文件结构的学习.理解和总结. 基础概念 PE(Portable Executable:可移植的执行体)是Win3 ...

  3. Google Test入门教程：从下载到运行

    本文以VS2019为例,自己的工程使用Debug x64,多线程调试DLL(/MDd),用户可以根据自己需求更改配置,只要所有配置前后统一即可. 第一步:clone Google Test源码 打开h ...

  4. rabbitmq linux卸载

    rabbitmq是运行在erlang环境下的,所以卸载时应将erlang卸载. 1.卸载rabbitmq相关 卸载前先停掉rabbitmq服务,执行命令 $ service rabbitmq-serv ...

  5. THINKPHP 中关联查询(多表查询)

    THINKPHP 中关联查询(多表查询)可以使用 table() 方法或和join方法,请看示例: 1.Table方法:定义要操作的数据表名称,可以动态改变当前操作的数据表名称,需要写数据表的全名,包 ...

  6. SUSE CaaS Platform 4 - 简介

    SUSE CaaS Platform KUBERNETES - 面向企业 SUSE CaaS Platform 是一款企业级容器管理解决方案,可让 IT 和 DevOps 专业人士更轻松地部署.管理和 ...

  7. Linux下几种常见压缩方式测试对比

    目录 Linux下几种常见压缩方式测试对比 参考 简介 测试 总结 Linux下几种常见压缩方式测试对比

  8. WebGL简易教程(八)：三维场景交互

    目录 1. 概述 2. 实例 2.1. 重绘刷新 2.2. 鼠标事件调整参数 3. 结果 4. 参考 1. 概述 在上一篇教程<WebGL简易教程(七):绘制一个矩形体>中,通过一个绘制矩 ...

  9. IDEA 学习笔记之 Web项目开发

    Web项目开发: 添加新模块: 起名: 添加jars: 添加Tomcat/local: 添加项目:  启动Tomcat: 看到web页面: 修改页面: 重新部署页面:

  10. Node.js入门教程 第六篇 （连接使用MySql）

    连接使用MySql 安装MySql模块: npm install mysql 创建连接: const mysql = require('mysql') // 连接 mysql 服务器 const co ...