如何将文本的颜色从背景的左侧改为右侧？

我有一个元素，当它徘徊，从左到右逐渐改变背景颜色。但是，我想要不仅改变背景颜色，还要改变文本的颜色，完全相同的时间/步伐。我怎样才能做到这一点？如何将文本的颜色从背景的左侧改为右侧？

这是我的相关CSS：

.left-to-right { 
    color: white; 
    background-size: 200% 100%; 
    background-image: linear-gradient(to right, #011228 50%, #FF7800 50%); 
    transition: background-position 1s; 
} 

.left-to-right:hover { 
    background-position: -100% 0; 
    color: #011228; 
}

Here's the fiddle.

来源

2016-01-26 David Matos

这可能是有用的https://jsfiddle.net/suunyz3e/2168/ – omer

一个posibility是使用背景剪辑：文本。但不幸的是，支持非常差。

.test { 
 
    height: 66px; 
 
    width: 200px; 
 
    background-size: 200% 100%; 
 
    background-image: linear-gradient(to right, lightblue 50%, blue 50%), linear-gradient(to right, green 50%, lightgreen 50%); 
 
    transition: background-position 6s; 
 
    text-indent: 28px; 
 
    font-size: 60px; 
 
    background-size: 200% 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: 100% top, 100% top; 
 
    -webkit-background-clip: text, border-box; 
 
    background-clip: text, border-box; 
 
    color: transparent; 
 
} 
 

 
.test:hover { 
 
\t background-position: 0% top, 0% top; 
 
}

<div class="test">TEST</div>

来源

2016-01-26 22:25:04 vals

谢谢，这正是我想要的！ –

如何将文本的颜色从背景的左侧改为右侧？

回答

相关问题