悬停时动画伪元素答案

【问题标题】：Animate pseudo element on hover悬停时动画伪元素
【发布时间】：2019-10-10 04:23:01
【问题描述】：

我有一个带有伪元素的输入，我试图在悬停时进行动画处理。我希望输入上的白线无限地向右滚动到视图之外，然后回到左侧等等。是这可能吗？

.buttonWrap {
    position: relative;
}
.buttonWrap:before {
    content: '';
    width: 20px;
    border-bottom: solid 2px #fff;
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
}
.buttonWrap:hover::before {
    animation: J 1s ease 0s infinite normal none;
}

.uiBtn.redBtn {
    background: #1a1a1a;
    text-transform: uppercase;
    text-align: left;
    color: #fff;
    min-width: 16.25rem;
    font-size: .6875rem;
    cursor: pointer;
    letter-spacing: 1px;
    line-height: 1rem;
    width: auto;
    margin-top: 2rem;
    font-weight: 600;
    padding:10px;
}

<span class="buttonWrap">
<input type="submit" class="uiBtn redBtn" value="Submit">
</span>

【问题讨论】：

标签： html css animation css-animations

【解决方案1】：

使用transform 属性的示例（我已经放慢了持续时间只是为了检查流动性）

.buttonWrap {
    position: relative;
}
.buttonWrap:before {
    content: '';
    width: 20px;
    border-bottom: solid 2px #fff;
    position: absolute;
    top: calc(50% - 1px);
    right: .5rem;
}
.buttonWrap:hover::before {
    animation: J 5s linear 0s infinite;
}

.uiBtn.redBtn {
    background: #1a1a1a;
    text-transform: uppercase;
    text-align: left;
    color: #fff;
    min-width: 16.25rem;
    font-size: .6875rem;
    cursor: pointer;
    letter-spacing: 1px;
    line-height: 1rem;
    width: auto;
    margin-top: 2rem;
    font-weight: 600;
    padding:10px;
}

@keyframes J {
   0% { transform: translateX(0); right: .5rem; }
   10% { transform: translateX(calc(100% + .5rem)); right: .5rem; }
   10.01% { transform: translateX(-100%); right: 100%;  }
   93% { transform: translateX(-100%); right: .5rem; }
}

<span class="buttonWrap">
<input type="submit" class="uiBtn redBtn" value="Submit">
</span>

【讨论】：

嘿 Fcalderan，太棒了。唯一的问题是，它会从按钮中滚动出来并重新进入。如果有意义的话，它意味着滚动回到行的开始位置。也许我需要一个围绕图标的包装，但这太棒了，谢谢！跨度>

【解决方案2】：

仅供参考；这就是最终为我工作的东西！ .. 将鼠标悬停在按钮上时会发生动画..

.underline::after {
  content: "";
  height: 2px;
  display: inline-block;
  position: absolute;
  left: 0;
  width: 30px;
  top:50%;
  background: #fff;
  transition: all;
}

.underline {
  position: absolute;
  right: .5rem;
  top: 50%;
  width: 30px;
}

.underlined-animated:hover .underline::after {
  animation: underline-animated 1s infinite;
  width: auto;
  animation-delay: -.5s;
}

.underlined-animated {
  position: relative;
}

@keyframes underline-animated {
  0% {
    right: 100%;
  }
  50% {
    right: 0;
    left: 0;
  }
  100% {
    right: 0;
    left: 100%;
  }
}

.uiBtn.redBtn {
    background: #1a1a1a;
    text-transform: uppercase;
    text-align: left;
    color: #fff;
    min-width: 16.25rem;
    font-size: .6875rem;
    cursor: pointer;
    letter-spacing: 1px;
    line-height: 1rem;
    width: auto;
    margin-top: 2rem;
    font-weight: 600;
    padding:10px;
}

<span class="underlined-animated">
  <span class="underline"></span>
<input type="submit" class="uiBtn redBtn" value="Submit">
</span>

【讨论】：