是否可以在这些翻转的圆圈之间插入箭头？

时间：2019-03-15 08:45:51

标签： html css twitter-bootstrap twitter-bootstrap-3

我用HTML和CSS创建了5个圆圈，它们会在鼠标悬停时翻转。这5个圈子包含5个进程。我希望这些过程之间的箭头有助于显示圆圈的顺序。有人可以帮我在这些圆圈之间插入右箭头吗？

这是5个过程。 5 processes

这是我的代码：

$(document).ready(function() {
  $('.hover').hover(function() {
    $(this).addClass('flip');
  }, function() {
    $(this).removeClass('flip');
  });
});
.col_half {
  width: 49%;
}

.col_third {
  width: 32%;
}

.col_fourth {
  width: 23.5%;
}

.col_fifth {
  width: 18.4%;
}

.col_sixth {
  width: 15%;
}

.col_three_fourth {
  width: 74.5%;
}

.col_twothird {
  width: 66%;
}

.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth {
  position: relative;
  display: inline;
  display: inline-block;
  float: left;
  margin-right: 2%;
  margin-bottom: 20px;
}

.end {
  margin-right: 0 !important;
}


/*-=-=-=-=-=-=-=-=-=-=- */


/* Flip Panel */


/*-=-=-=-=-=-=-=-=-=-=- */

.wrapper {
  width: 980px;
  margin: 0 auto;
  background-color: #bdd3de;
  hoverflow: hidden;
}

.panel1 {
  margin: 0 auto;
  height: 130px;
  position: relative;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
}

.panel1 .front,
.panel1 .back {
  text-align: center;
}

.panel1 .front {
  height: inherit;
  position: absolute;
  top: 0;
  z-index: 900;
  text-align: center;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.panel1 .back {
  height: inherit;
  position: absolute;
  top: 0;
  z-index: 1000;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.panel1.flip .front {
  z-index: 900;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}

.panel1.flip .back {
  z-index: 1000;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
}

.box1 {
  background-color: #1d1c1c;
  width: 158px;
  height: 160px;
  margin: 0 auto;
  padding: 26px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.box2 {
  background-color: #000000;
  width: 158px;
  height: 160px;
  margin: 0 auto;
  padding: 26px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.myp {
  padding-top: 28px;
  font-size: 18px;
  text-align: center;
  color: rgb(197, 0, 7)!important;
  font-family: 'Amperzand'!important;
}

.myp1 {
  padding-top: 28px;
  font-size: 18px;
  text-align: center;
  color: rgb(197, 0, 7)!important;
  font-family: 'Open Sans', sans-serif!important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="team1" id="team" style="background-color: #484848;">
  <div class="container">
    <div class="wrapper">
      <div class="col-lg-1">
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">
            <div class="front">
              <div class="box1">
                <p class="myp">Consulting</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Consulting</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">
            <div class="front">
              <div class="box1">
                <p class="myp">Planning</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Planning</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">
            <div class="front">
              <div class="box1">
                <p class="myp">Architectural Designing</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Architectural Designing</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">
            <div class="front">
              <div class="box1">
                <p class="myp">Construction Management</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Construction Management</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">
            <div class="front">
              <div class="box1">
                <p class="myp">Happy Living</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Final Delivery</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-1 agile_team_grid">
      </div>
    </div>
  </div>
</div>

<!-- begin snippet: js hide: false console: true babel: false -->

我想要这5个圆圈之间的箭头。like this。有人可以帮我吗？

2 个答案:

答案 0 :(得分：1)

我认为这就是您所需要的...关键是.fa-arrow-right { position: absolute; right: -5px; top: 50%; } 

$(document).ready(function() {
  $('.hover').hover(function() {
    $(this).addClass('flip');
  }, function() {
    $(this).removeClass('flip');
  });
});
.fa-arrow-right {
  position: absolute;
  right: -5px;
  top: 50%;
}

.col_half {
  width: 49%;
}

.col_third {
  width: 32%;
}

.col_fourth {
  width: 23.5%;
}

.col_fifth {
  width: 18.4%;
}

.col_sixth {
  width: 15%;
}

.col_three_fourth {
  width: 74.5%;
}

.col_twothird {
  width: 66%;
}

.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth {
  position: relative;
  display: inline;
  display: inline-block;
  float: left;
  margin-right: 2%;
  margin-bottom: 20px;
}

.end {
  margin-right: 0 !important;
}


/*-=-=-=-=-=-=-=-=-=-=- */


/* Flip Panel */


/*-=-=-=-=-=-=-=-=-=-=- */

.wrapper {
  width: 980px;
  margin: 0 auto;
  background-color: #bdd3de;
  hoverflow: hidden;
}

.panel1 {
  margin: 0 auto;
  height: 130px;
  position: relative;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
}

.panel1 .front,
.panel1 .back {
  text-align: center;
}

.panel1 .front {
  height: inherit;
  position: absolute;
  top: 0;
  z-index: 900;
  text-align: center;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.panel1 .back {
  height: inherit;
  position: absolute;
  top: 0;
  z-index: 1000;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.panel1.flip .front {
  z-index: 900;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}

.panel1.flip .back {
  z-index: 1000;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
}

.box1 {
  background-color: #1d1c1c;
  width: 158px;
  height: 160px;
  margin: 0 auto;
  padding: 26px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.box2 {
  background-color: #000000;
  width: 158px;
  height: 160px;
  margin: 0 auto;
  padding: 26px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.myp {
  padding-top: 28px;
  font-size: 18px;
  text-align: center;
  color: rgb(197, 0, 7)!important;
  font-family: 'Amperzand'!important;
}

.myp1 {
  padding-top: 28px;
  font-size: 18px;
  text-align: center;
  color: rgb(197, 0, 7)!important;
  font-family: 'Open Sans', sans-serif!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>

<div class="team1" id="team" style="background-color: #484848;">
  <div class="container">
    <div class="wrapper">
      <div class="col-lg-1">
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">

            <div class="front">
              <div class="box1">
                <p class="myp"> <i class='fas fa-arrow-right' style='font-size:24px; color:pink;'></i> Consulting </p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Consulting</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">

            <div class="front">
              <div class="box1">
                <p class="myp"> <i class='fas fa-arrow-right' style='font-size:24px; color:pink;'></i> Planning</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Planning</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">
            <div class="front">
              <div class="box1">
                <p class="myp"> <i class='fas fa-arrow-right' style='font-size:24px; color:pink;'></i> Architectural Designing</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Architectural Designing</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">

            <div class="front">
              <div class="box1">
                <p class="myp"> <i class='fas fa-arrow-right' style='font-size:24px; color:pink;'></i> Construction Management</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Construction Management</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">

            <div class="front">
              <div class="box1">
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Final Delivery</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-1 agile_team_grid">
      </div>
    </div>
  </div>
</div>

<!-- begin snippet: js hide: false console: true babel: false -->

答案 1 :(得分：0)

您以前听说过伪元素吗？

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

您可以尝试找到箭头的图像。然后，给圆提供一个类（例如.afterarrow），然后在:::上放置箭头并将其正确定位。像这样：

.afterarrow::after{
content: "";
background: url(images/arrow.png);
position: relative;
top: 10px;
left: 10px
}

像这样的事情会做，只需要按位置和左/上进行操作就可以了。

相关问题
最新问题