html - 动画 CSS 渐变仅在文本不换行时有效

Question

This 当文本或事物不像行尾的文本那样换行时，纯 CSS 动画渐变的示例效果很好。但是当发生环绕时，渐变会中断并且不会动画。这是一个稍微修改过的示例来演示。缩小屏幕，以便您可以看到第二个文本 block 环绕边缘，将鼠标悬停在它上面，然后注意它不会动画。

.button {
  background-size: 100%;
  background-image: linear-gradient(#fff, #ccc);
  border-radius: 0.45rem;
  border: 1px solid #ddd;
  cursor: pointer;
  color: #333;
  font-size: 1.25rem;
  font-weight: 300;
  position: relative;
}
  
.button:before {
  border-radius: inherit;
  background-image: linear-gradient(#ccc, #fff);
  content: '';    
  display: block;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  width: 100%;
  z-index: 100;
  transition: opacity 0.45s;
}

.button:hover:before {
  opacity: 1;
}

<span class='button'>hello</span> i am some text and then <span class='button'>i wrap around the edges</span> and go all the way around

想知道是否有任何方法可以在不使用 JS 的情况下实现这一点。

Answer 1

您可以通过使用大于显示区域高度的渐变并为其位置设置动画来获得类似的效果:

.button {
  background-size: 100% 150%;
  background-position: 0 0;
  background-image: linear-gradient(#fff 0, #ccc 50%, #fff 100%);
  border-radius: 0.45rem;
  border: 1px solid #ddd;
  cursor: pointer;
  color: #333;
  font-size: 1.25rem;
  font-weight: 300;
  position: relative;
  transition: background-position 0.45s;
}

.button:hover {
  background-position: 0 100%;
}

<span class='button'>hello</span> i am some text and then <span class='button'>i wrap around the edges</span> and go all the way around