3D旋转标签云
一定要先做下广告，衷心希望大家浏览博客的同时，可以点一下“ 赞助商 ” ，这个机构真的很棒，受疫情影响，原本的大机构为生源所困，我希望同样热爱前端，或者有兴趣向前端发展的朋友，可以了解一下这家机构。我不是学院的招生老师，但大家可以咨询我学院方面的问题，博主不图名利，如果入校学习，我肯定会想办法让机构给你最大的优惠。
“百闻不如一见”，我讲再多都不如你来问一问看一看。
CSS代码较少，用了200行JS脚本驱动，给自定义转速、半径、缩放添加了注释，方便博友自行修改。本页面部分代码取自“ 源码之家 ”，前端学习不是一蹴而就，必须有丰富的日常积累才能有所提升，我不是最饱读诗书的那个，但我敏而好学，不耻下问。真心希望大家都能学有所成，也希望大家能经常阅读我的文章，给我一点点支持，我可能会拖更，但不会断更。我热爱前端就像热爱自己，我更专注于动画制作，想寻找有同样兴趣的博友，共同进步。
上源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签云</title>
<style type="text/css"> #tagbox { position: relative; margin: 20px auto 0px; width: 500px; height: 500px; background-image: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=444462001,2967968230&fm=11&gp=0.jpg); } #tagbox .img img{ width: 70px; } #tagbox a,#tagbox .img img{ position: absolute; padding: 3px 6px; font-family: Microsoft YaHei; color: #fff; TOP: 0px; font-weight: bold; text-decoration: none; left: 0px } #tagbox a:hover{ border: #eee 1px solid; background: #000; } #tagbox .blue { color: blue } #tagbox .red { color: red } #tagbox .yellow { color: yellow } </style>
</head>
<body>
<div id="tagbox">
<a class="yellow" href="#">前端</a>
<a class="blue" href="#">Vue</a>
<a class="red" href="#">ajax</a>
<a class="img" href="#">
<img src="gexiangxiang.png" alt="" />
</a>
<a href="#">Jquery</a>
<a href="#">脚手架</a>
<a class="blue" href="#">CSS</a>
<a href="#">我不是费圆</a>
<a class="red" href="#"></a>
<a class="yellow" href="#">韩媒</a>
<a href="#">丽人</a>
<a class="red" href="#">搞笑</a>
<a href="#">感人</a>
<a class="blue" href="#">壁纸</a>
<a class="blue" href="#">古装</a>
<a class="red" href="#">言情</a>
<a class="yellow" href="#">浪漫</a>
<a class="yellow" href="#">耽美</a>
<a class="blue" href="#">爆笑</a>
<a class="yellow" href="#">挑眉</a>
<a class="blue" href="#">同人</a>
<a class="blue" href="#">武侠</a>
<a class="red" href="#">魔幻</a>
<a href="#">教案</a>
<a href="#">论文</a>
<a class="yellow" href="#">妩媚</a>
<a href="#">青丝</a>
<a href="#">带货</a>
<a class="blue" href="#">科幻</a>
<a class="red" href="#">恐怖</a>
<a class="red" href="#">星星</a>
<a class="blue" href="#">下载</a>
<a href="#">音乐</a>
<a class="blue" href="#">游戏</a>
<a class="blue" href="#">CG资源</a>
<a class="yellow" href="#">运势</a>
<a href="#">课件</a>
<a href="#">幽默</a>
<a class="red" href="#">学霸</a>
<a class="green" href="#">雅思</a>
<a href="#">名校</a>
<a class="red" href="#">赚钱</a>
<a class="yellow" href="#">干货</a>
<a class="yellow" href="#">香醇</a>
<a class="yellow" href="#">云电脑</a>
</div>
</body>
<script> var radius = 180; //牵涉到半径 var dtr = Math.PI/180;//旋转的快慢 var d=250; //字体缩放 var mcList = []; var active = false; var lasta = 1; var lastb = 1; var distr = true; var tspeed=5; var size=250; var mouseX=0; var mouseY=0; var howElliptical=1; var aA=null; var oDiv=null; window.onload=function (){ var i=0; var oTag=null; oDiv=document.getElementById('tagbox'); aA=oDiv.getElementsByTagName('a'); for(i=0;i<aA.length;i++){ oTag={}; oTag.offsetWidth=aA[i].offsetWidth; oTag.offsetHeight=aA[i].offsetHeight; mcList.push(oTag); } sineCosine( 0,0,0 ); positionAll(); oDiv.onmouseover=function () { active=true; }; oDiv.onmouseout=function () { active=false; }; oDiv.onmousemove=function (ev){ var oEvent=window.event || ev; mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2); mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2); mouseX/=5; mouseY/=5; }; setInterval(update, 30); }; function update(){ var a; var b; if(active) { a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed; b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed; } else { a = lasta * 0.98; b = lastb * 0.98; } lasta=a; lastb=b; if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01) { return; } var c=0; sineCosine(a,b,c); for(var j=0;j<mcList.length;j++){ var rx1=mcList[j].cx; var ry1=mcList[j].cy*ca+mcList[j].cz*(-sa); var rz1=mcList[j].cy*sa+mcList[j].cz*ca; var rx2=rx1*cb+rz1*sb; var ry2=ry1; var rz2=rx1*(-sb)+rz1*cb; var rx3=rx2*cc+ry2*(-sc); var ry3=rx2*sc+ry2*cc; var rz3=rz2; mcList[j].cx=rx3; mcList[j].cy=ry3; mcList[j].cz=rz3; per=d/(d+rz3); mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2); mcList[j].y=ry3*per; mcList[j].scale=per; mcList[j].alpha=per; mcList[j].alpha=(mcList[j].alpha-0.6)*(10/6); } doPosition(); depthSort(); } function depthSort(){ var i=0; var aTmp=[]; for(i=0;i<aA.length;i++) { aTmp.push(aA[i]); } aTmp.sort ( function (vItem1, vItem2) { if(vItem1.cz>vItem2.cz) { return -1; } else if(vItem1.cz<vItem2.cz) { return 1; } else { return 0; } } ); for(i=0;i<aTmp.length;i++) { aTmp[i].style.zIndex=i; } } function positionAll(){ var phi=0; var theta=0; var max=mcList.length; var i=0; var aTmp=[]; var oFragment=document.createDocumentFragment(); //Ëæ»úÅÅÐò for(i=0;i<aA.length;i++){ aTmp.push(aA[i]); } aTmp.sort ( function () { return Math.random()<0.5?1:-1; } ); for(i=0;i<aTmp.length;i++){ oFragment.appendChild(aTmp[i]); } oDiv.appendChild(oFragment); for( var i=1; i<max+1; i++){ if( distr ){ phi = Math.acos(-1+(2*i-1)/max); theta = Math.sqrt(max*Math.PI)*phi; } else { phi = Math.random()*(Math.PI); theta = Math.random()*(2*Math.PI); } //×ø±ê±ä»» mcList[i-1].cx = radius * Math.cos(theta)*Math.sin(phi); mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi); mcList[i-1].cz = radius * Math.cos(phi); aA[i-1].style.left=mcList[i-1].cx+oDiv.offsetWidth/2-mcList[i-1].offsetWidth/2+'px'; aA[i-1].style.top=mcList[i-1].cy+oDiv.offsetHeight/2-mcList[i-1].offsetHeight/2+'px'; } } function doPosition(){ var l=oDiv.offsetWidth/2; var t=oDiv.offsetHeight/2; for(var i=0;i<mcList.length;i++) { aA[i].style.left=mcList[i].cx+l-mcList[i].offsetWidth/2+'px'; aA[i].style.top=mcList[i].cy+t-mcList[i].offsetHeight/2+'px'; aA[i].style.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px'; aA[i].style.filter="alpha(opacity="+100*mcList[i].alpha+")"; aA[i].style.opacity=mcList[i].alpha; } } function sineCosine( a, b, c){ sa = Math.sin(a * dtr); ca = Math.cos(a * dtr); sb = Math.sin(b * dtr); cb = Math.cos(b * dtr); sc = Math.sin(c * dtr); cc = Math.cos(c * dtr); } </script>
</html>
代码开源，但需要有一定JS语音基础方可阅读。我明白“ 授人以鱼不如授人以渔 ”的道理，所以代码中常常只留下自定义注释，方便大家修改，但不能凭此参透其中的奥妙，我并没有藏拙，好学的人自然会想办法寻找答案，自学也是人生的一门必修课。
请点击赞助，了解更多内容：
河南奇酷
推荐阅读以下内容：
Canvas线条动画
CSS旋转魔方
JS迷你键盘
CSS逼真小象
