时间戳

首页 > 解决方案 > 从具有嵌入阴影的文本开始，当我将鼠标悬停在每个字母上时，如何为每个字母进行颜色转换？仅使用 CSS 和 HTML

html - 从具有嵌入阴影的文本开始，当我将鼠标悬停在每个字母上时，如何为每个字母进行颜色转换？仅使用 CSS 和 HTML

问题描述

从具有嵌入阴影的文本开始，当我将鼠标悬停在每个字母上时，如何为每个字母进行颜色转换？仅使用 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>

标签： htmlcsstextcolorstransition

解决方案

定位每个单独的字母（或单词）的唯一方法是将它们包装在s 中并使用 cssspan定位s。span在这个例子中，我将每个字母都包裹在一个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>

推荐阅读