Question

我在纯CSS中有一个多阶段的圆形导航栏。我想实现悬停效果，但是无法正常工作。它非常生涩和丑陋。如何使其平滑？

我们还能对蓝色球从0逐渐增加到全宽然后在其周围出现白色圆圈的悬停产生影响吗？

#stages_cont {
margin:50px auto;
width:600px;
}

#stages {
background:#d4d7df;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
height:5px;
}

#stages li {
float:left;
text-align:center;
width:33%;
}

#stages li a {
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-decoration:none;
}

.stage_done .stage_circle {
background:#2585fe;
border:6px solid #ffffff;
box-shadow:0px 0px 5px #d4d7df;
height:20px;
width:20px;
margin:-13px auto 10px;
}

.stage_not .stage_circle {
background:#d4d7df;
height:20px;
width:20px;
margin:-8px auto 17px;
-moz-transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
transition:all 0.5s ease;
}

.stage_done .stage_link {
color:#2585fe;
}

.stage_not .stage_link {
color:#d4d7df;
}

.clr {
clear:both;
}

.stage_not:hover .stage_circle {
background:#2585fe;
border:6px solid #ffffff;
box-shadow:0px 0px 5px #d4d7df;
margin:-13px auto 10px;
}

<link rel="stylesheet" type="text/css" href="https://meyerweb.com/eric/tools/css/reset/reset.css" />

<div id="stages_cont">
  <ul id="stages">
      <li class="stage_done">
          <a class="stage_circle" href="#"></a>
          <a class="stage_link" href="#">Details</a>
      </li>
      <li class="stage_done">
          <a class="stage_circle" href="#"></a>
          <a class="stage_link" href="#">Content</a>
      </li>
      <li class="stage_not">
          <a class="stage_circle" href="#"></a>
          <a class="stage_link" href="#">Send or Schedule</a>
      </li>
      <div class="clr"></div>
  </ul>
</div>

Answer 1

更新以下样式

.stage_not .stage_circle {
  background: #d4d7df;
  height: 20px;
  width: 20px;
  margin: -8px auto 17px;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  box-sizing: border-box;
}

.stage_not:hover .stage_circle {
  background: #2585fe;
  border: 6px solid #ffffff;
  box-shadow: 0px 0px 5px #d4d7df;
  margin: -13px auto 10px;
  box-sizing: border-box;
  height: 32px;
  width: 32px;
}

#stages_cont {
  margin: 50px auto;
  width: 600px;
}

#stages {
  background: #d4d7df;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  height: 5px;
}

#stages li {
  float: left;
  text-align: center;
  width: 33%;
}

#stages li a {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  text-decoration: none;
}

.stage_done .stage_circle {
  background: #2585fe;
  border: 6px solid #ffffff;
  box-shadow: 0px 0px 5px #d4d7df;
  height: 20px;
  width: 20px;
  margin: -13px auto 10px;
}

.stage_not .stage_circle {
  background: #d4d7df;
  height: 20px;
  width: 20px;
  margin: -8px auto 17px;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  box-sizing: border-box;
}

.stage_done .stage_link {
  color: #2585fe;
}

.stage_not .stage_link {
  color: #d4d7df;
}

.clr {
  clear: both;
}

.stage_not:hover .stage_circle {
  background: #2585fe;
  border: 6px solid #ffffff;
  box-shadow: 0px 0px 5px #d4d7df;
  margin: -13px auto 10px;
  box-sizing: border-box;
  height: 32px;
  width: 32px;
}

<link rel="stylesheet" type="text/css" href="https://meyerweb.com/eric/tools/css/reset/reset.css" />

<div id="stages_cont">
  <ul id="stages">
    <li class="stage_done">
      <a class="stage_circle" href="#"></a>
      <a class="stage_link" href="#">Details</a>
    </li>
    <li class="stage_done">
      <a class="stage_circle" href="#"></a>
      <a class="stage_link" href="#">Content</a>
    </li>
    <li class="stage_not">
      <a class="stage_circle" href="#"></a>
      <a class="stage_link" href="#">Send or Schedule</a>
    </li>
    <div class="clr"></div>
  </ul>
</div>

Answer 2

请按照指定的代码段更改css

class QuestionList(APIView):

    def get(self, request, *args, **kwargs):
        res = Question.objects.all()

        paginator = Paginator(res, 5)
        serializer = QuestionSerializers(res, many=True)
        return Response({"Section": serializer.data})

#stages_cont {
margin:50px auto;
width:600px;
}

#stages {
background:#d4d7df;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
height:5px;
}

#stages li {
float:left;
text-align:center;
width:33%;
}

#stages li a {
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-decoration:none;
}

.stage_done .stage_circle {
background:#2585fe;
border:6px solid #ffffff;
box-shadow:0px 0px 5px #d4d7df;
height:20px;
width:20px;
margin:-13px auto 10px;
}

.stage_not .stage_circle {
       background: #d4d7df;
    height: 20px;
    text-align: center;
    width: 20px;
    margin: auto;
    /* margin: -8px auto 17px; */
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 40px;
}
li.stage_not {
  position: relative;
} 
.stage_done .stage_link {
color:#2585fe;
}

.stage_not .stage_link {
color:#d4d7df;
}

.clr {
clear:both;
}

.stage_not:hover .stage_circle {
background:#2585fe;
border:6px solid #ffffff;
box-shadow:0px 0px 5px #d4d7df;
}
.stage_not a.stage_link {
      padding-top: 29px;
}

Answer 3

酷：）

在悬停中添加CSS动画

.stage_not:hover .stage_circle {
  animation-name: example;
  animation-duration: 0.5s;
}
@keyframes example {
  from {width:0px; border:none;}
  to {width:20px; border: 2px solid white;}
}

显然，这需要一些技巧，但至少需要一个开始。

https://www.w3schools.com/css/css3_animations.asp

Answer 4

您需要对CSS进行一些细微更改才能获得流畅的体验。我在这里分享您需要更改的内容。

将动画添加到“ #stages li” css。

Material

CSS中多级导航栏上的平滑悬停效果

4 个答案: