js实现三维文字墙球体圆锥体柱体等旋转效果代码
代码语言:html
所属分类:三维
代码描述:js实现三维文字墙球体圆锥体柱体等旋转效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> @charset "utf-8"; /*样式重置*/ html,body { user-select: none; -moz-user-select: none; -webkit-user-select: none; } body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,input,select,textarea,form { margin: 0; padding: 0; } ul,ol { list-style: none; } img { border: none; display: block; } input,select,textarea,button { outline: none; border: none; background-color: transparent; } textarea { resize: none; } a { text-decoration: none; } h1,h2,h3,h4,h5,h6 { font-size: 1em; } em { font-style: normal; } /*浮动*/ .fl { float: left; } .fr { float: right; } .clearfix:after, .clearfix:before { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } html { height: 100%; overflow: hidden; } body { height: 100%; overflow: hidden; user-select: none; -moz-user-select: none; -webkit-user-select: none; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; font-family: '微软雅黑'; background-color: #131313; } li { list-style: none; } .middle { width: 1000px; height: 620px; position: absolute; left: 50%; top: 50%; margin-left: -500px; margin-top: -310px; } .scene { width: 400px; height: 400px; margin: 0 auto; perspective: 900px; -webkit-perspective: 900px; position: relative; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; color: #16E5FF; } .box { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; perspective-origin: center 250px; } .ring { width: 100%; height: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; position: absolute; } .ring li { line-height: 30px; text-align: center; font-size: 16px; position: absolute; margin-top: -25px; margin-left: -15px; transition: all .6s; } li.all { transition: all .6s cubic-bezier(.75,.25,1,1); } li.one { transition: transform .6s cubic-bezier(0,0,.25,.75); } .text { position: absolute; top: 30px; left: 50%; margin-left: -329px; padding: 15px 18px; width: 602px; height: 318px; border: 1px solid #e5e5e5; border-radius: 8px; box-shadow: 0 5px 5px #d4dbe1; background-color: #fff; transform: scale(.5); opacity: 0; transition: opacity .3s cubic-bezier(.15,.84,.35,1), transform .3s cubic-bezier(.15,.84,.35,1); display: none; } .text p { margin-bottom: 12px; font-size: 12px; } .text textarea { resize: none; width: 580px; height: 220px; padding: 10px; border: 1px solid #cacaca; border-radius: 8px; background-color: #f3f7fa; margin-bottom: 15px; color: #00a0e9; } .text a { position: absolute; top: 10px; right: 10px; width: 19px; height: 19px; background: url("//repo.bfw.wiki/bfwrepo/icon/5e0fe414dc9a1.png") no-repeat center; } .btn { margin: 0 auto; width: 260px; overflow: hidden; } .btn button { width: 120px; height: 30px; border: 1px solid #cacaca; border-radius: 15px; float: left; } .btn button:nth-of-type(1) { margin-right: 18px; } .table { width: 400px; margin: 20px auto 10px; overflow: hidden; } .table a { float: left; width: 100px; height: 12px; padding-top: 94px; font-size: 12px; line-height: 12px; text-align: center; color: #889199; } .table a:nth-of-type(1) { background: url("//repo.bfw.wiki/bfwrepo/images/sanwei/circle.png") no-repeat center 2px; } .table a:nth-of-type(2) { background: url("//repo.bfw.wiki/bfwrepo/images/sanwei/Cone.png") no-repeat center top; } .table a:nth-of-type(3) { background: url("//repo.bfw.wiki/bfwrepo/images/sanwei/Column.png") no-repeat center top; } .table a:nth-of-type(4) { background: url("//repo.bfw.wiki/bfwrepo/images/sanwei/Column2.png") no-repeat center top; } .table a:nth-of-type(1):hover { background: url("//repo.bfw.wiki/bfwrepo/images/sanwei/circle-hover.png") no-repeat center 2px; } .table a:nth-of-type(2):hover { background: url("//repo.bfw.wiki/bfwrepo/images/sanwei/Cone-hover.png") no-repeat center top; } .table a:nth-of-type(3):hover { background: url("//repo.bfw.wiki/bfwrepo/images/sanwei/Column-hover.png") no-repeat center top; } .table a:nth-of-type(4):hover { background: url("//repo.bfw.wiki/bfwrepo/images/sanwei/Column2-hover.png") no-repeat center top; } .table a:nth-of-type(1).active { background: url("//repo.bfw.wiki/bfwrepo/images/sanwei/circle-active.png") no-repeat center 2px; } .table a:nth-of-type(2).active { background: url("//repo.bfw.wiki/bfwrepo/images/sanwei/Cone-active.png") no-repeat center top; } .table a:nth-of-type(3).active { background: url("//repo.bfw.wiki/bfwrepo/images/sanwei/Column-active.png") no-repeat center top; } .table a:nth-of-type(4).active { background: url("//repo.bfw.wiki/bfwrepo/images/sanwei/Column2-active.png") no-repeat center top; } .line { width: 734px; height: 1px; margin: 0 auto 14px; background: -webkit-linear-gradient(left,#7ecef4,#94cc8e,#fff45c); } .btn2 { width: 204px; margin: 0 auto; overflow: hidden; } .btn2 button { width: 100px; height: 30px; border: 1px solid #cacaca; float: left; } .btn2 button:nth-of-type(1) { border-radius: 15px 0 0 15px; } .btn2 button:nth-of-type(2) { margin-left: -1px; border-radius: 0 15px 15px 0; } button { background: linear-gradient(#fff,#e3ecf3); color: #889199; } button:hover { background: linear-gradient(#fff,#bef5ff 10%,#6cb7df); border-color: #bef5ff; color: #00a0e9; } button:active { background: linear-gradient(#fff,#6cb7df 10%,#bef5ff); } button.active { background: linear-gradient(#fff,#6cb7df 10%,#bef5ff); } .item { width: 400px; padding: 30px; top: 100px; margin: -30px; position: fixed; transform: scale(2); -webkit-transform: scale(2); opacity: 0; display: none; transform-origin: center center 200px; -webkit-transform-origin: center center 200px; opacity: 0; transition: all .5s ease; } .item a { position: absolute; top: 10px; right: 10px; width: 19px; height: 19px; background: url("//repo.bfw.wiki/bfwrepo/icon/5d834b3fc7ffe.png") no-repeat center; } .item p { font-size: 14px; line-height: 24px; word-break: break-all; } </style> </head> <body> <div class="middle"> <div class="scene"> <div class="box"> <ul class="ring"> </ul> </div> <div class="item"> <p> 北国风光,千里冰封,万里雪飘。望长城内外,惟余莽莽;大河上下,顿失滔滔。山舞银蛇,原驰蜡象,欲与天公试比高。须晴日,看红装素裹,分外妖娆。江山如此多娇,引无数英雄竞折腰。惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。一代天骄,成吉思汗,只识弯弓射大雕。俱往矣,数风流人物,还看今朝。 </p> <a href="javascript:;" class="close"></a> </div> </div> <div class="text"> <p> 在下面输入你自己的文字(建议50-350字) </p> <textarea cols="30" rows="10"></textarea> <div class="btn"> <button>提交</button> <button>重置</button> </div> <a href="javascript:;" class="close"></a> </div> <div class="table"> <a href="javascript:;" class="active">圆球</a> <a href="javascript:;">圆锥</a> <a href="javascript:;">柱状</a> <a href="javascript:;">柱状扭曲</a> </div> <div class="line"></div> <div class="btn2"> <button>展开</button> <button>自定义文字</button> </div> </div> <script> function setCss3 (obj, attrObj) { for (var i in attrObj) { var newi = i; if (newi.indexOf("-") > 0) { var num = newi.indexOf("-"); newi = newi.replace(newi.substr(num, 2), newi.substr(num+1, 1).toUpperCase()); } obj.style[newi] = attrObj[i]; newi = newi.replace(newi.charAt(0), newi.charAt(0).toUpperCase()); obj.style["webkit"+newi] = attrObj[i]; obj.style["moz"+newi] = attrObj[i]; obj.style["o"+newi] = attrObj[i]; obj.style["ms"+newi] = attrObj[i]; } } var s = '北国风光,千里冰封,万里雪飘。望长城内外,惟余莽莽;大河上下,顿失滔滔。山舞银蛇,原驰蜡象,欲与天公试比高。须晴日,看红装素裹,分外妖娆。江山如此多娇,引无数英雄竞折腰。惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。一代天骄,成吉思汗,只识弯弓射大雕。俱往矣,数风流人物,还看今朝。'; window.onload = function () { var oScene = document.getElementsByClassName('scene')[0]; var oUl = oScene.getElementsByTagName('ul')[0]; var oDiv = oScene.getElementsByTagName('div')[0]; var oTable = document.getElementsByClassName('table')[0]; var aA = oTable.getElementsByTagName('a'); var oBtn = document.getElementsByClassName('btn2')[0]; var aBtn = oBtn.getElementsByTagName('button'); var oItem = document.getElementsByClassName('item')[0]; var oP = oScene.getElementsByTagName('p')[0]; var aClose = document.getElementsByClassName('close'); var aLi = oUl.getElementsByTagName('li'); var oText = document.getElementsByClassName('text')[0]; var oTextarea = oText.getElementsByTagName('textarea')[0]; var aBtn2 = oText.getElementsByTagName('button'); var r = 150; var circleArr = []; var coneArr = []; var coneNum = 0; var wordNum = -1; var liNub = 0; var theta = 0; var phi = 0; var layer = 0; var num = 0; var iTimer2 = 0; var graph = 1; var columnH = 0; var columnNum = 0; star(); function star() { circleArr = []; coneArr = []; coneNum = 0; wordNum = -1; liNub = 0; theta = 0; phi = 0; layer = 0; num = 0; aA[graph-1].className = ''; graph = 1; aA[graph-1].className = 'active'; for (var i = 4; i < 13; i++) { num = i*i + (i+1)*(i+1); if (num >= s.length) { layer = (i-1)*2+1; break; } layer = (i-1)*2+1; } for (var i = 0; i < layer; i++) { if (i < (layer+1)/2) { wordNum += 2; } else { wordNum -= 2; } circleArr.push(wordNum); } num = 0; for (var i = 0; i < circleArr.length; i++) { theta = Math.PI/circleArr.length; phi = 2*Math.PI/circleArr[i]; for (var j = 0; j < circleArr[i]; j++) { var li = document.createElement('li'); li.innerHTML = s[num]; num++; drawCircle(li, theta, phi, i, j); oUl.appendChild(li); } } for (var i = 0; i < aLi.length; i++) { coneNum += 2*i+1; if (coneNum > aLi.length) { coneNum -= 2*i+1; break; } coneArr.push(2*i+1); } for (var i = 0; i < coneArr.length; i++) { phi = 2*Math.PI/coneArr[i]; for (var j = 0; j < coneArr[i]; j++) { drawCone(aLi[liNub], phi, i, j); liNub++; } } liNub = 0; columnH = Math.floor(aLi.length/(circleArr.length-2)); columnNum = columnH*(circleArr.length-2); for (var i = 0; i < circleArr.length-1; i++) { phi = 2*Math.PI/columnH; for (var j = 0; j < columnH; j++) { drawColumn(aLi[liNub], phi, i, j); drawColumn2(aLi[liNub], phi, i, j); liNub++; } } for (var i = 0; i < aLi.length; i++) { setCss3(aLi[i], { transform: 'translate3D('+ aLi[i].circleX +'px,'+ aLi[i].circleY +'px,'+ aLi[i].circleZ +'px) rotateY('+ aLi[i].circlePhi +'rad) rotateX('+ (aLi[i].circleTheta-Math.PI/2) +'rad)' }); } } aA[0].onclick = function() { clearTimeout(iTimer2); aA[graph - 1].className = ''; graph = 1; aA[graph - 1].className = 'active'; startChange(); if (oItem.bOff) { fn(); } else { iTimer2 = setTimeout(function () { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0