Эффект перехода цвета текста снизу вверх - PullRequest
Новая
       38

Эффект перехода цвета текста снизу вверх

0 голосов
/ 16 мая 2018

Как разрешить изменение цвета текста с черного на красный с эффектом перехода css (например, замедление) снизу вверх для определенной высоты в процентах?

Я получил значение - скажем,50%.Итак, теперь я хочу изменить цвет текста моего примера: пример с черного на красный с эффектом перехода CSS.Но эффект перехода должен начинаться снизу, а затем идти вверх (а не слева направо, как показывают многие примеры).В конце текст «пример» должен быть наполовину окрашен черным - снизу до середины теста (50%) и наполовину окрашен красным - от середины текста до верха (100%).

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

Есть много способов сделать эффект, я рекомендую для более плавного перехода, создать на заднем плане градиент с цветами, которые вы хотите использовать, и переместить фон в положение, где видны только те цвета, которые вы хотите. 

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>
0 голосов
/ 16 мая 2018

Привет, @ 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 для контроля эффекта

...