如何用css、javascript围绕一个圆圈创建圆圈？

Question

I would like to create a circle (without any animation) which is surrounded by other circles, like this:我想创建一个被其他圆圈包围的圆圈（没有任何动画），如下所示：

我的想法

but i would like to build in a phonegap app, so i don't want to increase the file size to big.但我想构建一个 phonegap 应用程序，所以我不想将文件大小增加到很大。

somebody know a plugin/method or any other solution?有人知道插件/方法或任何其他解决方案吗？

I searched on the inte.net, but the methods i found are increase the size of my files too big.我在 inte.net 上搜索过，但我发现的方法是将文件的大小增加得太大。

Answer 1

No one addressed the javascript aspect of this question. 没有人解决这个问题的javascript方面。 Below is a complete (albeit quick and dirty) web page that will draw 6 perfectly spaced circles around a parent circle's center using html, css3, and javascript; 下面是一个完整的（虽然快速和脏）网页，将使用html，css3和javascript在父圆圈的中心周围绘制6个完美间隔的圆圈; it uses pure javascript so no need to reference a jquery library. 它使用纯JavaScript，因此无需引用jquery库。 You should be able to see how you could easily extract methods from the code to control the number of satellite circles, their distance from the center of the parent, parent and satellite radii, satellite offset, etc: 你应该能够看到如何从代码中轻松提取方法来控制卫星圆的数量，它们与父母中心的距离，父和卫星半径，卫星偏移等：

 var div = 360 / 6; var radius = 150; var parentdiv = document.getElementById('parentdiv'); var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square var offsetToChildCenter = 20; var totalOffset = offsetToParentCenter - offsetToChildCenter; for (var i = 1; i <= 6; ++i) { var childdiv = document.createElement('div'); childdiv.className = 'div2'; childdiv.style.position = 'absolute'; var y = Math.sin((div * i) * (Math.PI / 180)) * radius; var x = Math.cos((div * i) * (Math.PI / 180)) * radius; childdiv.style.top = (y + totalOffset).toString() + "px"; childdiv.style.left = (x + totalOffset).toString() + "px"; parentdiv.appendChild(childdiv); }

 #parentdiv { position: relative; width: 150px; height: 150px; background-color: #ac5; border-radius: 150px; margin: 150px; } .div2 { position: absolute; width: 40px; height: 40px; background-color: #ac5; border-radius: 100px; }

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="parentdiv"></div> </body> </html>

Answer 2

To make a circle, use border-radius: 50% . 要制作圆，请使用border-radius: 50% 。 Then just position 6 circular divs with position: absolute around the larger circle. 然后只需divs 6个圆形divs ，其position: absolute围绕较大的圆圈。

Kind of like this: http://jsfiddle.net/yxVkk/ 有点像： http ： //jsfiddle.net/yxVkk/

<div id="big-circle" class="circle big">
    <div class="circle one"></div>
    <div class="circle two"></div>
    <div class="circle three"></div>
    <div class="circle four"></div>
    <div class="circle five"></div>
    <div class="circle six"></div>
</div>

<style>
.circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-color: red;
    display: inline-block;
    position: absolute;
}

.circle.big {
    width: 150px;
    height: 150px;
    background-color: blue;
    margin: 100px;
}

.one {
    left: -25px;
    top: -25px;
}

.two {
    top: -60px;
    left: 50px;
}

.three {
    right: -25px;
    top: -25px;
}


.four {
    left: -25px;
    bottom: -25px;
}

.five {
    bottom: -60px;
    left: 50px;
}

.six {
    right: -25px;
    bottom: -25px;
}
</style>

Answer 3

Using css you can try something like that. 使用CSS你可以尝试这样的东西。 but use circle tag of HTML5 will give you a better result. 但使用HTML5的圆形标签会给你一个更好的结果。

http://jsbin.com/etuzis/1/ http://jsbin.com/etuzis/1/

HTML HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class=div2 style='top:12px; left:45px;'></div>
  <div class=div2 style='top:4px; left:160px;'></div>
   <div class=div2 style='top:94px; left:210px;'></div>
  <div class=div1></div>

  </body>
</html>

CSS CSS

.div1{
  margin:40px 10px 10px 50px;
  position:relative;
  width:150px;
  height:150px;
  background-color:#ac5;
  border-radius:100px;
}
.div2{
  position:absolute;
  width:40px;
  height:40px;
  background-color:#ac5;
  border-radius:100px;
}

Answer 4

Adding border-radius:50% to a <div> that has an equal with and height then putting a background-color on it will make a circle out of CSS (light load). 将border-radius：50％添加到具有等于和高度的<div>然后在其上放置背景颜色将使CSS成为圆圈（轻载）。

.big_circle {
  width:10em;
  height:10em;
  border-radius:50%;
  background-color:blue;
}

You can then absolutely position the circle directly in the middle of the screen by using the position:absolute and negative margin trick. 然后，您可以使用位置：绝对和负边距技巧将圆圈直接放置在屏幕中间。

.big_circle {
  width:10em;
  height:10em;
  border-radius:50%;
  background-color:blue;

  position:absolute;
  top:50%;
  left:50%;
  margin-left:-5em;
  margin-top:-5em;
}

Create a class to take care of the styling for the smaller circles. 创建一个类来处理较小圆圈的样式。

.little_circle {
  width:3em;
  height:3em;
  border-radius:50%;
  background-color:green;
  position:relative;
}

Then add IDs (or any other way of identifying them) to position the relatively compared to the big circle. 然后添加ID（或任何其他识别方式）来定位相对于大圆圈的位置。

#little_one {
  bottom:1em;
  right:2em;
}

#little_two {
  bottom:6.5em;
  left:3.5em;
}

#little_three {
  bottom:7em;
  left:9em;
}

// etc...

Here's a CodePen with a sample. 这是一个带样本的CodePen。

Answer 5

As somebody said in the comments, you have to set border-radius:50% and then, positioning absolutely. 正如有人在评论中所说，你必须设置border-radius:50%然后绝对定位。 I've made a dummy jsfiddle for illustrate link : 我为了说明链接制作了一个虚拟的jsfiddle：

        circle{
    width : 50px;
    height : 50px;
    border-radius : 50%;
    background: red;
    position : absolute;
    top : 50px;
    left : 150px;
}
.small_circle_1{
    width : 20px;
    height : 20px;
    border-radius : 50%;
    background: blue;
    position : absolute;
    top : -25px;
    left : 15px;
}
.small_circle_2{
    width : 20px;
    height : 20px;
    border-radius : 50%;
    background: blue;
    position : absolute;
    top : 15px;
    left : -25px;
}
.small_circle_3{
    width : 20px;
    height : 20px;
    border-radius : 50%;
    background: blue;
    position : absolute;
    top : 55px;
    left : 15px;
}
.small_circle_4{
    width : 20px;
    height : 20px;
    border-radius : 50%;
    background: blue;
    position : absolute;
    top : 15px;
    left : 55px;
}

Answer 6

To display a radial array of items, center them and use trigonometry to rotate them around the center.要显示项目的径向阵列，请将它们居中并使用三角函数将它们围绕中心旋转。 This assumes all the items share the same width and height.这假设所有项目共享相同的宽度和高度。

Notes about this approach:关于这种方法的注意事项：

Multiple radials can reuse the JS function in a wide variety of configurations多个径向可以在各种配置中重复使用 JS function
There should only be one .radial_center (though the code could be updated to allow multiple layered centers, taking the diameter of the largest for calculations)应该只有一个.radial_center （尽管可以更新代码以允许多层中心，取最大的直径进行计算）
There can be multiple .radial_edge items, and the function automatically adjusts the angle of rotation .radial_edge项可以有多个，function自动调整旋转角度
Trig functions and coefficients are adjusted so the first edge is always on top调整三角函数和系数，使第一个边缘始终在顶部
data fields in the .radial wrapper can manually set diameters for the center and edge items, as well as the percentage gap between them, which calculates to the radius for the edge items from the center item .radial包装器中的data字段可以手动设置center和edge项目的直径，以及它们之间的百分比gap ，计算中心项目的边缘项目的半径
The center item can be hidden to create a "ring only" effect, though the center still needs to exist可以隐藏中心项目以创建“仅环”效果，但中心仍然需要存在

Yes, any code written in jQuery or any other lib can be re-written in vanilla (or asm or binary).是的，任何用 jQuery 或任何其他库编写的代码都可以用 vanilla（或 asm 或二进制）重写。 I just used jQuery for my own convenience:)为了方便起见，我只是使用了 jQuery :)

 const ns = { radial: (r) => { //capture radial edges let el = $(r), e = el.children('.radial_edge'); //avoid div zero if (e.length) { //calc orbital angle and radius let c = el.children('.radial_center'), sa = -360 / e.length, //-360 rotates clockwise, 360 rotates counter i = 0, //0 sets first child at top cw = el.data('center') || c.width() || 100, ew = el.data('edge'), gap = el.data('gap') ||.2; //calc x,y and reposition each edge e.each(function() { let re = $(this), ewa = ew || re.width() || 50, rad = (cw + ewa) * (1 + gap), x = Math.cos((sa * i) * (Math.PI / 180)) * rad * -1, //-1 flips vertically y = Math.sin((sa * i) * (Math.PI / 180)) * rad * -1; re.css({ inset: x + 'px 0 0 ' + y + 'px' }); i++; }); } } } $(document).ready(() => { //parse each radial group $('.radial').each(function() { ns.radial(this); }); });

 :root { /* decorative */ --bs: 1px 1px 3px 0px grey; --b-soft: thin solid silver; font-family: monospace; color: gray; } img { display: block; }.hidden { display: none; }.examples { display: flex; flex-wrap: wrap; }.radial { /* required */ position: relative; /* dev only */ margin: 1em auto; border: 1px solid lightgray; width: 350px; aspect-ratio: 1/1; border-radius: 50%; }.radial_center { /* required */ width: fit-content; aspect-ratio: 1/1; position: absolute; inset: 50%; transform: translate(-50%, -50%); /* decorative */ border-radius: 50%; box-shadow: var(--bs); border: var(--b-soft); }.radial_edge { /* required */ position: absolute; width: 50px; aspect-ratio: 1/1; margin: auto; /* decorative */ border-radius: 50%; box-shadow: var(--bs); border: var(--b-soft); opacity: .7; display: flex; justify-content: center; align-items: center; font-weight: 500; font-size: 2em; }.bigger.radial_center { width: 150px; }.bigger.radial_edge { width: 100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="examples"> <div class="radial" data-gap=".3"> <img class="radial_center" src="https://picsum.photos/100" alt="center image" /> <div class="radial_edge">1</div> <div class="radial_edge">2</div> <div class="radial_edge">3</div> <div class="radial_edge">4</div> <div class="radial_edge">5</div> </div> <div class="radial bigger" data-gap=".05"> <img class="radial_center" src="https://picsum.photos/150" alt="center image" /> <img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" /> <img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" /> <img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" /> </div> <div class="radial" data-center="75" data-edge="75"> <div class="radial_center hidden"></div> <div class="radial_edge">1</div> <img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="1" /> <div class="radial_edge">3</div> <img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="2" /> <div class="radial_edge">5</div> <img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="3" /> </div> </div>

如何用css、javascript围绕一个圆圈创建圆圈？

问题描述

6 个解决方案

解决方案1
24 已采纳 2013-06-22 14:19:19

解决方案2
14 2013-05-17 16:35:39

解决方案3
1 2013-05-17 16:34:48

解决方案4
1 2013-05-17 16:45:23

解决方案5
0 2013-05-17 16:36:43

解决方案6
0 2022-02-20 23:37:19

如何用css、javascript围绕一个圆圈创建圆圈？

问题描述

6 个解决方案

解决方案1 24 已采纳 2013-06-22 14:19:19

解决方案2 14 2013-05-17 16:35:39

解决方案3 1 2013-05-17 16:34:48

解决方案4 1 2013-05-17 16:45:23

解决方案5 0 2013-05-17 16:36:43

解决方案6 0 2022-02-20 23:37:19

解决方案1
24 已采纳 2013-06-22 14:19:19

解决方案2
14 2013-05-17 16:35:39

解决方案3
1 2013-05-17 16:34:48

解决方案4
1 2013-05-17 16:45:23

解决方案5
0 2013-05-17 16:36:43

解决方案6
0 2022-02-20 23:37:19