Question

我有一个输入，其中有一个要在悬停时设置动画的伪元素。.我希望输入上的白线无限地向右滚动到视图之外，然后再向左滚动，等等。这可能吗？

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

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

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

悬停时对伪元素进行动画处理

2 个答案: