发布时间：2025-12-11 00:44:33 浏览次数：2
效果如图:
代码实现:
<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><pclass="center-point"></p><pclass="surround-box"><pclass="circlecircle1">1</p><pclass="circlecircle2">2</p><pclass="circlecircle3">3</p><pclass="circlecircle4">4</p><pclass="circlecircle5">5</p><pclass="circlecircle6">6</p><pclass="circlecircle7">7</p><pclass="circlecircle8">8</p><pclass="circlecircle9">9</p><pclass="circlecircle10">10</p><pclass="circlecircle11">11</p><pclass="circlecircle12">12</p></p></body>
关于怎么在css3中实现元素环绕中心点布局问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注本站行业资讯频道了解更多相关知识。
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流