Question

如何让文字颜色从黑色变为红色，从底部到顶部的css过渡效果（例如缓出），以特定高度为百分比？

我有一个价值 - 让我们说50％。所以现在我想更改我的示例文本的文本颜色：示例从黑色到红色，具有css过渡效果。但是过渡效应应该从底部开始然后继续到顶部（而不是从左到右，因为许多例子证明了它）。最后，文本“示例”应该是黑色的一半 - 从测试的底部到中间（50％）和半红色 - 从文本的中间到顶部（100％）。

Answer 1

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

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

嘿@ Opa114请看看我的codepen，了解我是如何实现这种效果的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 背景大小和背景位置在这里控制效果很重要

从底部到顶部的文本颜色过渡效果

2 个答案: