css怎么平均分布,css如何让元素平均分布在圆上
满意答案
3rr34
2018.09.17
采纳率:57% 等级:12
已帮助:12427⼈
.zh-circle{position: relative;width: 240px;height: 240px;border-radius: 50%;border: 1px solid #f00;box-sizing: border-
box;margin: 100px auto 0;} .zh-circle li{position: absolute;z-index: 2;left: 50%;top: 0;width: 40px;height: 40px;margin: -20px 0 0 -20px;border: 1px solid #f00;border-radius: 50%;box-sizing: border-box;list-styl
e: none;transform-origin: 20px 140px;}
var liSize = 10,
li = ''; for(var i=0; i
li += '
';
}
$('.zh-circle').html(li);
描述⼀下:
1、transform-origin: x y z; 设置旋转中⼼点,⽰例中为什么是20px 140px呢,正常情况下是0 120px的,但前端做了margin向上向左偏移20px,所以这⾥需要加回来。
2、360/liSize*i 设置叠加旋转⾓度
borderbox00分享举报
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论