从下到上的文本颜色过渡效果

Question

如何让文本颜色从黑色变为红色，并具有 css 过渡效果(例如缓出)从下到上的特定高度(以百分比表示)？

我得到了一个值 - 假设 50%。所以现在我想更改我的示例文本的文本颜色：示例从黑色更改为红色，具有 css 过渡效果。但是过渡效果应该从底部开始，然后继续到顶部(而不是像许多例子所证明的那样从左到右)。最后，文本"示例"应该一半用黑色着色 - 从测试的底部到中间 (50%)，一半用红色着色 - 从文本中间到顶部 (100%)。

Answer 1

有很多方法可以使效果，我建议进行更平滑的过渡，在背景中创建具有要使用的颜色的渐变，并将背景移动到仅可见所需颜色的位置。

h1{
font-size: 4em;
text-align: center;
color: transparent;
background-position-y: -0%;
background-image: linear-gradient( black, red, white, green );
-webkit-background-clip: text;
-moz-background-clip: text;
transition: background 1400ms ease;
background-size: auto 400%;
}
h1.deg1{
background-position-y: -100%;
}
h1.deg2{
background-position-y: -200%;
}
h1.deg3{
background-position-y: -300%;
}

<h1 id="prueba"> Hola Mundo</h1>
<button onclick="document.getElementById('prueba').className='deg1'"> Cambiar 1 </button> 
<button onclick="document.getElementById('prueba').className='deg2'"> Cambiar 2 </button> 
<button onclick="document.getElementById('prueba').className='deg3'"> Cambiar 2 </button>

Answer 2

嘿@Opa114请看一下我的代码笔，了解我是如何实现这种效果的 https://codepen.io/akinhwan/pen/JvmJpO

a {
font: 300 42px/1.5 "Helvetica Neue", sans-serif;
margin-left: 80px;
color: $main-color;
text-decoration: none;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(
0deg,
$secondary-color,
$secondary-color 50%,
$main-color 50%);
background-size: 100% 200%;
background-position: 0% 0%;
}
a:hover {
transition: all 0.3s cubic-bezier(0.000, 0.000, 0.230, 1);
background-position: 100% 100%;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient 背景大小和背景位置在这里对于控制效果很重要