前言

有时候看到一些精美的前端样式，总想记录下来...

效果

这个是个旋转球3D效果的标签样式如上

静态图看不出效果哈，等会自己copy代码去试试，不做动态图了。

实现

实现也不难

准备个HTML

标签样式：

.tagBall{width:800px;height:800px;margin:50px auto;position:relative;}
.tag{display:block;position:absolute;left:0px;top:0px;color:#000;text-decoration:none;font-size:15px;font-family:"微软雅黑";font-weight:bold;}
.tag:hover{border:1px solid #666;}
</style>

有意思的代码

主要靠的还是定时循环，以及鼠标移动事件

定时循环

function animate(){
	setInterval(function(){
		rotateX();
		rotateY();
		tags.forEach(function(){
			this.move();
		})
	} , 17)
}

鼠标移动事件

监听页面鼠标情况，鼠标移动进去、移动出去后都触发事件

if("addEventListener" in window){
	paper.addEventListener("mousemove" , function(event){
		var x = event.clientX - EX - CX;
		var y = event.clientY - EY - CY;
		// angleY = -x* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
		// angleX = -y* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
		angleY = x*0.0001;
		angleX = y*0.0001;
	});
}
else {
	paper.attachEvent("onmousemove" , function(event){
		var x = event.clientX - EX - CX;
		var y = event.clientY - EY - CY;
		angleY = x*0.0001;
		angleX = y*0.0001;
	});
}

完整代码

贴上完整代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3D标签</title>

<style type="text/css">
.tagBall{width:800px;height:800px;margin:50px auto;position:relative;}
.tag{display:block;position:absolute;left:0px;top:0px;color:#000;text-decoration:none;font-size:15px;font-family:"微软雅黑";font-weight:bold;}
.tag:hover{border:1px solid #666;}
</style>
    
</head>
<body>

<div class="tagBall">
<a class="tag" target="_blank" href="#">java</a>
<a class="tag" target="_blank" href="#">Spring</a>
<a class="tag" target="_blank" href="#">javascript</a>
<a class="tag" target="_blank" href="#">Python</a>
<a class="tag" target="_blank" href="#">后半夜</a>
<a class="tag" target="_blank" href="#">java</a>
<a class="tag" target="_blank" href="#">Spring</a>
<a class="tag" target="_blank" href="#">javascript</a>
<a class="tag" target="_blank" href="#">Python</a>
<a class="tag" target="_blank" href="#">后半夜</a>
<a class="tag" target="_blank" href="#">java</a>
<a class="tag" target="_blank" href="#">Spring</a>
<a class="tag" target="_blank" href="#">javascript</a>
<a class="tag" target="_blank" href="#">Python</a>
<a class="tag" target="_blank" href="#">后半夜</a>
<a class="tag" target="_blank" href="#">java</a>
<a class="tag" target="_blank" href="#">Spring</a>
<a class="tag" target="_blank" href="#">javascript</a>
<a class="tag" target="_blank" href="#">Python</a>
<a class="tag" target="_blank" href="#">后半夜</a>
<a class="tag" target="_blank" href="#">java</a>
<a class="tag" target="_blank" href="#">Spring</a>
<a class="tag" target="_blank" href="#">javascript</a>
<a class="tag" target="_blank" href="#">Python</a>
<a class="tag" target="_blank" href="#">后半夜</a>
<a class="tag" target="_blank" href="#">java</a>
<a class="tag" target="_blank" href="#">Spring</a>
<a class="tag" target="_blank" href="#">javascript</a>
<a class="tag" target="_blank" href="#">Python</a>
<a class="tag" target="_blank" href="#">后半夜</a>
<a class="tag" target="_blank" href="#">java</a>
<a class="tag" target="_blank" href="#">Spring</a>
<a class="tag" target="_blank" href="#">javascript</a>
<a class="tag" target="_blank" href="#">Python</a>
<a class="tag" target="_blank" href="#">后半夜</a>
<a class="tag" target="_blank" href="#">java</a>
<a class="tag" target="_blank" href="#">Spring</a>
<a class="tag" target="_blank" href="#">javascript</a>
<a class="tag" target="_blank" href="#">Python</a>
<a class="tag" target="_blank" href="#">后半夜</a>

</div>

<script type="text/javascript">
var tagEle = "querySelectorAll" in document ? document.querySelectorAll(".tag") : getClass("tag"),
	paper = "querySelectorAll" in document ? document.querySelector(".tagBall") : getClass("tagBall")[0];
	RADIUS =300,
	fallLength = 500,
	tags=[],
	angleX = Math.PI/500,
	angleY = Math.PI/500,
	CX = paper.offsetWidth/2,
	CY = paper.offsetHeight/2,
	EX = paper.offsetLeft + document.body.scrollLeft + document.documentElement.scrollLeft,
	EY = paper.offsetTop + document.body.scrollTop + document.documentElement.scrollTop;

function getClass(className){
	var ele = document.getElementsByTagName("*");
	var classEle = [];
	for(var i=0;i<ele.length;i++){
		var cn = ele[i].className;
		if(cn === className){
			classEle.push(ele[i]);
		}
	}
	return classEle;
}

function innit(){
	for(var i=0;i<tagEle.length;i++){
		var a , b;
		var k = (2*(i+1)-1)/tagEle.length - 1;
		var a = Math.acos(k);
		var b = a*Math.sqrt(tagEle.length*Math.PI);
		// var a = Math.random()*2*Math.PI;
		// var b = Math.random()*2*Math.PI;
		var x = RADIUS * Math.sin(a) * Math.cos(b);
		var y = RADIUS * Math.sin(a) * Math.sin(b); 
		var z = RADIUS * Math.cos(a);
		var t = new tag(tagEle[i] , x , y , z);
		tagEle[i].style.color = "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
		tags.push(t);
		t.move();
	}
}

Array.prototype.forEach = function(callback){
	for(var i=0;i<this.length;i++){
		callback.call(this[i]);
	}
}

function animate(){
	setInterval(function(){
		rotateX();
		rotateY();
		tags.forEach(function(){
			this.move();
		})
	} , 17)
}

if("addEventListener" in window){
	paper.addEventListener("mousemove" , function(event){
		var x = event.clientX - EX - CX;
		var y = event.clientY - EY - CY;
		// angleY = -x* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
		// angleX = -y* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
		angleY = x*0.0001;
		angleX = y*0.0001;
	});
}
else {
	paper.attachEvent("onmousemove" , function(event){
		var x = event.clientX - EX - CX;
		var y = event.clientY - EY - CY;
		angleY = x*0.0001;
		angleX = y*0.0001;
	});
}

function rotateX(){
	var cos = Math.cos(angleX);
	var sin = Math.sin(angleX);
	tags.forEach(function(){
		var y1 = this.y * cos - this.z * sin;
		var z1 = this.z * cos + this.y * sin;
		this.y = y1;
		this.z = z1;
	})
	
}

function rotateY(){
	var cos = Math.cos(angleY);
	var sin = Math.sin(angleY);
	tags.forEach(function(){
		var x1 = this.x * cos - this.z * sin;
		var z1 = this.z * cos + this.x * sin;
		this.x = x1;
		this.z = z1;
	})
}

var tag = function(ele , x , y , z){
	this.ele = ele;
	this.x = x;
	this.y = y;
	this.z = z;
}

tag.prototype = {
	move:function(){
		var scale = fallLength/(fallLength-this.z);
		var alpha = (this.z+RADIUS)/(2*RADIUS);
		this.ele.style.fontSize = 15 * scale + "px";
		this.ele.style.opacity = alpha+0.5;
		this.ele.style.filter = "alpha(opacity = "+(alpha+0.5)*100+")";
		this.ele.style.zIndex = parseInt(scale*100);
		this.ele.style.left = this.x + CX - this.ele.offsetWidth/2 +"px";
		this.ele.style.top = this.y + CY - this.ele.offsetHeight/2 +"px";
	}
}
innit();
animate();
</script>

</body>
</html>

总结

3D标签循环的球状，在一些报表、统计类的还是比较经常使用的。这些标签可以从后端统计过来，然后点击这些标签在触发一些事件。

很多有意思的代码分享，与大家共享，如果你那也有一些有意思的特效啥的逻辑代码，欢迎留言分享哈

3D标签旋转球，前端可以上大屏的效果

前言

效果

实现

准备个HTML

有意思的代码

定时循环

鼠标移动事件

完整代码

总结