如何在外圆边框上用小圆圈绘制圆形图像周围的圆圈？

Question

我正在创建使用html CSS和jquery这样的推荐滑块

我尝试使用html css bellow是代码和截图

HTML代码： -

  <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport"content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="css/testo.css">
 <link rel="stylesheet" href="css/bootstrap.min.css">
 <link href="https://fonts.googleapis.com/css?family=Open+Sans|Quicksand" rel="stylesheet">
 <script src="js/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
</head>

<body class="testo-body">
<div class="container-fluid">
 <div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 client">
   <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
   </div>
   <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <h3>Complex Roy</h3>
    <h5>Web Designer</h5>
    <h6>Logictrix technologies is a good company. it's give batter products and services.Logictrix technologies is a good comp. it's give batter products and services.Logictrix technologies is a good company. it's give batter products and services. Logictrix technologies is a good company. it's give batter products and services.</h6>
   </div>
  </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
   <div class="big-cir">
    <center><img class="img-responsive img-circle" id="profile-image" height="250" width="250" src="image/client-1.png"></center> 
    </div>
   </div>
 </div>
</div>
</body>
</html>

CSS： -

.testo-body{
background-color:white;
}
.out-cir{
 margin-top:-23%;
}
.profile{
margin-top:-20.5%;
margin-left:-31%;
}
.client{
background-color:#161e43;
color:white;
margin-top:20%;
}
.blue1{

}
.big-cir{
 background-color:none;
 height:300px;
 width:300px;
 border-radius:50%;
 position:relative;
 border-color:rgb(167,183,254);
 border-style:solid;
 border-width:2px;
 margin-top:-23%;



}

.img-circle {
    border-radius: 50%;
 margin-top:7%;

}

屏幕截图使用HTML： -

现在我如何将圆圈放在外圆线上并使它们具有动画效果？ 任何建议或代码都会对我有所帮助

Answer 1

您可以使用css中的before和after属性在外部大圆上创建小圆圈。 我试过这个。 我能够创建两个圆圈。 希望这能帮助你找到正确的方法...（如果我能够创建第三个或多个，我会更新）

HTML代码：

<div class="testo-body">
   <div class="container-fluid">
      <div class="row">
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 client">
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
               <h3>Complex Roy</h3>
               <h5>Web Designer</h5>
               <h6>Logictrix technologies is a good company. it's give batter products and services.Logictrix technologies is a good comp. it's give batter products and services.Logictrix technologies is a good company. it's give batter products and services. Logictrix technologies is a good company. it's give batter products and services.</h6>
            </div>
         </div>
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 client-image">
            <center><img class="img-responsive img-circle" id="profile-image" height="250" width="250" src="http://placehold.it/500x500"></center>
            <div class="big-cir">
               <div class="small-cir"></div>
               <div class="small-cir2"></div>
               <div class="small-cir3"></div>
            </div>
         </div>
      </div>
   </div>

CSS代码：

.testo-body {
   background-color: white;
}

.out-cir {
   margin-top: -23%;
}

.profile {
   margin-top: -20.5%;
   margin-left: -31%;
}

.client {
   background-color: #161e43;
   color: white;
   margin-top: 10%;
}

.blue1 {}

.big-cir {
   height: 300px;
   width: 300px;
   border-radius: 50%;
   position: relative;
   border-color: rgb(167, 183, 254);
   border-style: solid;
   border-width: 2px;
   animation: dotmove cubic-bezier(1,0,0,1) 2s infinite;
}

.big-cir > .small-cir {
   background-color: #000;
   border-radius: 50%;
   position: absolute;
   border-color: rgb(167, 183, 254);
   border-style: solid;
   border-width: 2px;
   padding: 5px;
   content: "";
   left: 90px; // you may need to change this
}

.big-cir > .small-cir2 {
   background-color: #000;
   border-radius: 50%;
   position: absolute;
   border-color: rgb(167, 183, 254);
   border-style: solid;
   border-width: 2px;
   padding: 5px;
   content: "";
   left: 290px;
   top: 130px;
}

.big-cir > .small-cir3 {
   background-color: #000;
   border-radius: 50%;
   position: absolute;
   border-color: rgb(167, 183, 254);
   border-style: solid;
   border-width: 2px;
   padding: 5px;
   content: "";
   left: 150px;
   top: 290px;
}

.img-circle {
   margin: 25px;
   position: absolute;
}

.client-image {
   margin-top: -230px;
   margin-left: 10px;
}

@keyframes dotmove {
   from {
      transform: rotate(90deg);
   }
   to {
      transform: rotate(0deg);
   }
}

小提琴： https ： //jsfiddle.net/rahul8590/k0y00Lqc/10/