Question

我有一个按钮，在悬停时右侧有一个背景颜色幻灯片，工作正常，但我也需要更改文本颜色。我设法让它褪色，但那不能正常工作。我想要的是从右侧开始的颜色过渡幻灯片与背景变化一致。

＆＃13;

.slideybutton {
    background-size: 200% 100%;
    background-image: linear-gradient(to right, white 50%, blue 50%);
    transition: background-position 1s linear, color 1s linear;
    color: blue;
}
.slideybutton:hover {
    background-position: -100% 0;
    color: white;
}

＆＃13;

<a class="slideybutton">
 Lorem ipsum dolor sit amet.
</a>

＆＃13;

我已经看到了这个问题，但在这种情况下，唯一的解决办法是不可行的。 Sliding in changing text color animation

我缺少一些CSS技巧吗？谷歌搜索不会导致任何指向正确方向的事情，所以我担心我会尝试不可能的事情。

我很乐意使用JS或jQuery，如果它能实现我想要的目标。

Answer 1

This could be done by "combining the text with the background", the key is property background-clip, check this out:

.slideybutton { 
  background-size: 200% 100%; 
  background-image: linear-gradient(to right, blue 50%, white 50%),
                    linear-gradient(to right, white 50%, blue 50%);
  transition: background-position 1s linear; 
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box; 
  color: transparent; 

} 
.slideybutton:hover { 
  background-position: -100% 0; 
}

<a class="slideybutton">
 Lorem ipsum dolor sit amet.
</a>

Answer 2

仅使用伪元素提供替代方案。适用于镀铬。

＆＃13;

use strict

＆＃13;

.slideybutton {
  position: relative;
}
.slideybutton:hover {
  /* to fix a bug in IE */
}
.slideybutton:hover::after {
  width: 100%;
}
.slideybutton::before {
  content: attr(title);
  color: blue;
}
.slideybutton::after {
  content: attr(title);
  position: absolute;
  left: 0;
  width: 0;
  top: 0;
  bottom: 0;
  color: white;
  transition: width 1s linear;
  background-color: blue;
  white-space: nowrap;
  overflow: hidden;
}

＆＃13;

Answer 3

i don't think you'll be able to do this elegantly using a pure css solution at the moment. backdrop filters look promising for what you want to achieve - you would slowly overlay an element with a backdrop filter - this would apply the filter to the text as you move across it.

Check out more here https://webkit.org/demos/backdrop-filter/

幻灯片动画文字颜色变化

3 个答案: