html - CSS <hr> 宽度过渡

标签 html css css-transitions

我正在尝试在 https://ollynural.github.io/ 上的社交媒体链接上创建转换但我无法让它按预期工作。

当鼠标悬停在每个图标上时,我的目标是让小时栏平滑地将左右两侧过渡到正确的点,同时使其变小。此刻它会将条的起点移动到较小部分的设定点,然后平滑地减小它。我不太确定如何处理这个问题,我现在主要在试验 CSS 和过渡。

我做了一个 JSFiddle here尽我所能。

.social-links {
  margin: 0 auto;
  width: 50%;
}
hr {
  width: 90%;
  border-top: 2px solid #8c8b8b;
  transition: width 0.5s ease;
}
@media (min-width: 768px) {
  .social-links {
    width: 30%;
  }
}
.social-links span {
  width: 100%;
  text-align: center;
  font-size: 1.8rem;
  margin-top: 15px;
}
@media (min-width: 420px) {
  .social-links span {
    font-size: 2rem;
    margin-top: 25px;
  }
}
.fa-github:hover {
  color: #64a4df;
}
.github-link:hover ~ .social-line {
  width: 7.5%;
  margin-left: 9%;
}
.fa-linkedin-square:hover {
  color: #64a4df;
}
.linkedin-link:hover ~ .social-line {
  width: 7.5%;
  margin-left: 34%;
}
.fa-twitter-square:hover {
  color: #64a4df;
}
.twitter-link:hover ~ .social-line {
  width: 7.5%;
  margin-left: 59%;
}
.fa-facebook-square:hover {
  color: #64a4df;
}
.facebook-link:hover ~ .social-line {
  width: 7.5%;
  margin-left: 84%;
}
.social-link {
  margin-bottom: 20px;
  padding-right: 0px;
  padding-left: 0px;
  height: 20px;
  width: 20px;
  background: red;
}
<div class="social-bar">
  <div class="col-xs-12">
    <div class="social-links">

      <div class="col-xs-3 github-link social-link">
        <a href="https://github.com/OllyNural" target="github">
          <span class="fa fa-github"></span>
        </a>
      </div>
      <div class="col-xs-3 linkedin-link social-link">
        <a href="https://www.linkedin.com/in/oliver-nural-43565497" target="linkedin">
          <span class="fa fa-linkedin-square"></span>
        </a>
      </div>
      <div class="col-xs-3 twitter-link social-link">
        <a href="https://twitter.com/OliverNural" target="twitter">
          <span class="fa fa-twitter-square"></span>
        </a>
      </div>
      <div class="col-xs-3 facebook-link social-link">
        <a href="https://www.facebook.com/Olly.Nural" target="facebook">
          <span class="fa fa-facebook-square"></span>
        </a>
      </div>

      <hr class="social-line">
    </div>
  </div>
</div>

谢谢,奥利

最佳答案

您在这里更改了两个属性,widthmargin-left。 因此,您需要为 width(正如您所做的那样)和 margin-left 设置过渡。 为了使其顺利运行,您需要为 `margin-left' 设置一个数字初始值。 这对我有用:

hr {
  margin-left: 5%;
  width: 90%;
  border-top: 2px solid #8c8b8b;
  transition: width 0.5s ease, margin-left 0.5s ease;
}

关于html - CSS <hr> 宽度过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39649817/

相关文章:

html - Bootstrap 3-内联表单在 Chrome 中未正确对齐

php - 在编辑器上更新 header.php 时 Wordpress 主题崩溃

css - 如何在 SVG 中将一个圆圈附加到另一个圆圈之上?

css - 为什么 CSS ease 不适用于鼠标移开?

css - 菜单 'Swinging' 悬停时奇怪

javascript - 如何正确调整我的 Squarespace 封面视频大小?

javascript - 如何为所有查看者更新 html 页面?

jquery - 在滚动上使用 Jquery 时 Foundation 6 sticky 不起作用

html - 对于 chrome 61 中具有全尺寸内部 div 的子像素边框,是否有解决方法?

html - 将 HTML 元素上的关键动画一个接一个地分开