css 鼠标触碰文字 后 文字特效

如果你想要实现的是鼠标离开文字时的特效，可以使用CSS的伪类选择器:hover和transition属性。

首先，在CSS中定义文字的样式，例如：

.text {
  font-size: 24px;
  color: #333;
  text-shadow: 1px 1px 1px #ddd;
  transition: all 0.3s ease-in-out;
}

这里也添加了一个过渡效果。

然后，使用:hover伪类选择器来为鼠标悬停时的文字添加特效，例如：

.text:hover {
  text-decoration: underline;
  color: #ff6600;
  text-shadow: 1px 1px 1px #ff6600;
}

这里的text-decoration属性用来添加下划线特效，color属性用来改变文字颜色，text-shadow属性用来改变文字阴影颜色。

最后，使用.text:hover之外的选择器来定义鼠标离开文字时的特效，例如：

.text {
  font-size: 24px;
  color: #333;
  text-shadow: 1px 1px 1px #ddd;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

.text:hover {
  text-decoration: underline;
  color: #ff6600;
  text-shadow: 1px 1px 1px #ff6600;
}

.text:after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  background-color: #ff6600;
  transition: all 0.3s ease-in-out;
}

.text:hover:after {
  width: 100%;
}

这里使用了伪元素::after来为文字添加一个下划线，当鼠标离开文字时，下划线会逐渐消失。

完整的CSS代码如下：

.text {
  font-size: 24px;
  color: #333;
  text-shadow: 1px 1px 1px #ddd;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

.text:hover {
  text-decoration: underline;
  color: #ff6600;
  text-shadow: 1px 1px 1px #ff6600;
}

.text:after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  background-color: #ff6600;
  transition: all 0.3s ease-in-out;
}

.text:hover:after {
  width: 100%;
}

这样，当鼠标离开文字时，下划线会逐渐消失，从而实现了文字特效。