Начиная с текста со вставленной тенью, как я могу сделать цветовой переход для каждой буквы, когда я наводю курсор на каждую букву?Только с использованием CSS и HTML - PullRequest
Новая
       14

Начиная с текста со вставленной тенью, как я могу сделать цветовой переход для каждой буквы, когда я наводю курсор на каждую букву?Только с использованием CSS и HTML

0 голосов
/ 15 ноября 2018

Начиная с текста со вставленной тенью, как мне сделать цветовой переход для каждой буквы, когда я наводю курсор на каждую букву?Только с использованием CSS и HTML.

Я хочу создать эффект подсветки букв каменной таблички красным, похожим на огонь.Для творческого школьного проекта.

Кроме того, если проще делать отдельные слова, а не буквы, это тоже подойдет. 

body {
  background: #ccc;
}

h1 {
  font: bold 100px arial, sans-serif;
  background-color: #565656;
  color: transparent;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  transition: 2s;
}

h1:hover {
  text-shadow: 2px 2px 3px rgba(255, 0, 0, 0.5);
}
<h1>Thou shall code.</h1>

1 Ответ

0 голосов
/ 17 декабря 2018

Единственный способ нацелить каждую отдельную букву (или слово) - обернуть их в span s и нацелиться на span s с помощью css.В этом примере я завернул каждую букву в span. 

body {
  background: #ccc;
}

h1 {
  font: bold 100px arial, sans-serif;
  background-color: #565656;
  color: transparent;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

h1 span {
  transition: 2s;
}
h1 span:hover {
  text-shadow: 2px 2px 3px rgba(255, 0, 0, 0.5);
}
<h1><span>T</span><span>h</span><span>o</span><span>u</span> <span>s</span><span>h</span><span>a</span><span>l</span><span>l</span> <span>c</span><span>o</span><span>d</span><span>e</span>.</h1>
...