Question

我希望在父元素悬停时让标题看起来有动画下划线。现在它非常接近，但我似乎无法正确定位它的宽度从它的中心向两个方向增长，这就是我想要的。有人知道我缺少什么或需要添加到我的代码来实现这一目标吗？下面的代码是我认为与修复情况相关的代码。整个项目也可以通过此CodePen查看。提前致谢！（下划线仅在悬停时应用于第一个标题。）

HTML：

<div class="row flex-row">
    <div id="top-image" class="image-block">
        <h3>Fish Tail</h3>

        <div class="underline"></div>

        <img class="flex-image" src="https://source.unsplash.com/KSHq0VSqLMA">
    </div>
    <div class="image-block">
        <h3>Swallow Tail</h3>
        <img class="flex-image" src="https://source.unsplash.com/U--hvQ5MKjY">
    </div>
    <div class="image-block">
        <h3>Directional</h3>
        <img class="flex-image" src="https://source.unsplash.com/F3ePNdQb_Lg">
    </div>
</div>

CSS：

.image-block:hover > h3{
    letter-spacing: 8px;
    transition: all .3s ease-in-out;
}

.underline {
    visibility: hidden;
    background-position: center;
    background-color: white;
    position: absolute;
    top: 60%;
    margin: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    transform: scaleX(0);
    webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.image-block:hover .underline {
    visibility: visible;
    transform: scaleX(1);
    width: 100%;
    height: 10px;
    transition: all .3s ease-in-out;
}

修改

我正在尝试使用其他人的Underlining Effect CodePen相同的想法。最大的区别是我不想在标题中加<a>。

Answer 1

如果您将width: 100%应用于.underline规则，则会从中心开始动画。

.underline {
  visibility: hidden;
  background-position: center;
  background-color: white;
  position: absolute;
  top: 60%;
  margin: 0;
  width: 100%;    /**** Change this to 100% ****/
  height: 10px;
  border-radius: 5px;
  transform: scaleX(0);
  webkit-transition: all .2s ease-in-out;
  transition: all .3s ease-in-out;
}

调整线宽

要调整线条的宽度，您可以更改以下内容：

  .underline{
    margin: 10% /*<== Set to half of 'what's left' in this case half of 20% is 10%*/
    width: 80%;
  }

  .image-block:hover .underline {
    width: 80% /*<== Set to match the .underline width */
  }

* {
  box-sizing: border-box;
}

.row {
  min-width: 100%;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.image-block {
  position: relative;
  width: 33.33%;
  float: left;
  margin-top: 0;
  z-index: 5;
}

.image-block:hover {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.image-block h3 {
  position: absolute;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  color: white;
  top: 40%;
  width: 100%;
  font-size: 48px;
  letter-spacing: 5px;
  margin: 0;
  transition: all .3s ease-in-out;
}

.image-block:hover>h3 {
  letter-spacing: 8px;
  transition: all .3s ease-in-out;
}

.underline {
  visibility: hidden;
  background-position: center;
  background-color: white;
  position: absolute;
  top: 60%;
  margin: 0;
  width: 100%;
  /**** Change this to 100% ****/
  height: 10px;
  border-radius: 5px;
  transform: scaleX(0);
  webkit-transition: all .2s ease-in-out;
  transition: all .3s ease-in-out;
}

.image-block:hover .underline {
  visibility: visible;
  transform: scaleX(1);
  width: 100%;
  height: 10px;
  transition: all .3s ease-in-out;
}

.flex-image {
  width: 100%;
  height: auto;
  display: flex;
}

@media all and (max-width: 1200px) {
  .image-block {
    width: 33.33%%;
  }
}

@media all and (max-width: 1660px) {
  .navbar a {
    padding: 14px 14%;
  }
}

@media all and (max-width: 1035px) {
  .navbar a {
    padding: 14px 12%;
  }
}

@media all and (max-width: 880px) {
  #top-image {
    margin-top: 150px;
  }
  .image-block {
    width: 100%;
    margin: 0;
  }
  .navbar a:not(:first-child) {
    display: none;
  }
  .navbar a.icon {
    float: right;
    display: block;
  }
  .navbar.responsive {
    position: relative;
  }
  .navbar.responsive .icon {
    position: fixed;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .navbar a:hover {
    transform: scale(1);
  }
}

<div class="row flex-row">
  <div id="top-image" class="image-block">
    <h3>Fish Tail</h3>
    <div class="underline">
    </div>
    <img class="flex-image" src="https://source.unsplash.com/KSHq0VSqLMA">
  </div>
</div>

创建下划线转换CSS

1 个答案:

调整线宽