怎么在css3中实现元素环绕中心点布局
作者
怎么在css3中实现元素环绕中心点布局?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
效果如图:
代码实现:
<style> *{ margin:0; padding:0; box-sizing:border-box; } .surround-box, .center-point{ position:absolute; top:50%; left:50%; width:20px; height:20px; margin-left:-10px; margin-top:-10px; border-radius:50%; background-color:#000; } .circle{ /*这里一定要绝对定位,这样位置才能铺开来*/ position:absolute; top:-10px; left:-10px; width:40px; height:40px; line-height:40px; border-radius:50%; text-align:center; color:#fff; } .circle1{ background-color:red; /*rotateZ控制方向,每个元素旋转30度,12个元素刚好360度。translateY控制每个元素距中心点的距离*/ transform:rotateZ(30deg)translateY(80px); } .circle2{ background-color:orange; transform:rotateZ(60deg)translateY(80px); } .circle3{ background-color:yellow; transform:rotateZ(90deg)translateY(80px); } .circle4{ background-color:green; transform:rotateZ(120deg)translateY(80px); } .circle5{ background-color:seagreen; transform:rotateZ(150deg)translateY(80px); } .circle6{ background-color:blue; transform:rotateZ(180deg)translateY(80px); } .circle7{ background-color:purple; transform:rotateZ(210deg)translateY(80px); } .circle8{ background-color:lightsalmon; transform:rotateZ(240deg)translateY(80px); } .circle9{ background-color:deeppink; transform:rotateZ(270deg)translateY(80px); } .circle10{ background-color:lightyellow; transform:rotateZ(300deg)translateY(80px); } .circle11{ background-color:lightgreen; transform:rotateZ(330deg)translateY(80px); } .circle12{ background-color:lightslategrey; transform:rotateZ(360deg)translateY(80px); } </style>
<body> <divclass="center-point"></div> <divclass="surround-box"> <divclass="circlecircle1">1</div> <divclass="circlecircle2">2</div> <divclass="circlecircle3">3</div> <divclass="circlecircle4">4</div> <divclass="circlecircle5">5</div> <divclass="circlecircle6">6</div> <divclass="circlecircle7">7</div> <divclass="circlecircle8">8</div> <divclass="circlecircle9">9</div> <divclass="circlecircle10">10</div> <divclass="circlecircle11">11</div> <divclass="circlecircle12">12</div> </div> </body>
关于怎么在css3中实现元素环绕中心点布局问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注恰卡编程网行业资讯频道了解更多相关知识。
目录
推荐阅读
0 条评论
本站已关闭游客评论,请登录或者注册后再评论吧~