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

Question

我怎样才能让文本颜色从黑色变为红色，css 过渡效果（例如缓出）从底部到顶部达到特定的百分比高度？

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

Answer 1

嘿@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 background-size 和 background-position 在这里很重要，可以控制效果

Answer 2

制作效果的方法有很多，我建议为了更平滑的过渡，在背景中创建一个包含您想要使用的颜色的渐变，并将背景移动到只有您想要的颜色可见的位置。

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>

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

Text Color Transition Effect from Bottom to Top

css

transition

css-transitions