Question

This在纯CSS中为渐变设置动画效果的示例非常有用，当文本或事物不像行尾的文本那样包裹时。但是，当发生环绕时，渐变会破裂并且不会设置动画。这是一个稍作修改的示例来演示。缩小屏幕，以便您可以看到第二个文本块环绕在边缘上，将鼠标悬停在其上，并注意该文本将不会动画。

.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

仅当文本不环绕时，动画CSS渐变才有效

1 个答案: