时间戳

首页 > 解决方案 > css中多级导航栏的平滑悬停效果

css - css中多级导航栏的平滑悬停效果

问题描述

我有一个纯 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>

标签： css

解决方案

更新以下样式

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

推荐阅读