.demo{
  width: 600px;
  height: 600px;
  background-color: #000000;
  padding: 100px;
  box-sizing: border-box;
  margin-top: 20px;
}
ul,li{
  margin: 0;
  list-style-type: none;
  padding: 0;
}
ul{
  width: 400px;
  height: 400px;
  background-color:#fff;
  border-radius: 50%;
  position: relative;
}
li{
  width: 40px;
  height: 40px;
  position: absolute;
  background-color:red;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
  left: 50%;
  margin-left: -20px;
  margin-top: -20px;
}
li:nth-of-type(2){
  transform: rotate(45deg);
  transform-origin:20px 220px;
}
li:nth-of-type(3){
  transform: rotate(90deg);
  transform-origin:20px 220px;
}
li:nth-of-type(4){
  transform: rotate(135deg);
  transform-origin:20px 220px;
}
li:nth-of-type(5){
  transform: rotate(180deg);
  transform-origin:20px 220px;
}
li:nth-of-type(6){
  transform: rotate(225deg);
  transform-origin:20px 220px;
}
li:nth-of-type(7){
  transform: rotate(270deg);
  transform-origin:20px 220px;
}
li:nth-of-type(8){
  transform: rotate(315deg);
  transform-origin:20px 220px;
}