How to create circles around a circle with css, javascript?

前端未结

关注

 5  1469

感情败类

I would like to create a circle (without any animation) which is surrounded by other circles, like this:

$\"my$

相关标签:

5条回答

青春惊慌失措

2020-12-14 18:43
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).
```
.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.
```
#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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

自闭症患者

2020-12-14 18:50

To make a circle, use border-radius: 50%. Then just position 6 circular divs with position: absolute around the larger circle.

Kind of like this: 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>

0 讨论(0)

感动是毒

2020-12-14 18:53

Using css you can try something like that. but use circle tag of HTML5 will give you a better result.

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

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

.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;
}

0 讨论(0)

忘掉有多难

2020-12-14 18:54

No one addressed the javascript aspect of this question. 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; it uses pure javascript so no need to reference a jquery library. 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>

0 讨论(0)

滥情空心

2020-12-14 19:05

As somebody said in the comments, you have to set border-radius:50% and then, positioning absolutely. I've made a dummy jsfiddle for illustrate link:

        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;
}

0 讨论(0)