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

可以使用CSS的:hover伪类来实现鼠标触碰文字的特效。例如，可以将文字变色、加粗、加下划线等。以下是一个示例代码：

<style>
    .text-effect:hover {
        color: red; /* 改变文字颜色 */
        font-weight: bold; /* 加粗文字 */
        text-decoration: underline; /* 给文字加下划线 */
    }
</style>

<p class="text-effect">鼠标触碰这段文字看看效果</p>

你可以根据需要修改CSS属性来实现不同的特效效果。

相关问题

css 鼠标触碰文字 文字加聚光灯特效

可以使用CSS的伪元素和动画来实现鼠标触碰文字的聚光灯特效。以下是一个示例代码：

<style>
    .text-effect {
        position: relative;
    }
    .text-effect::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.5);
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: all 0.3s ease-out;
    }
    .text-effect:hover::before {
        width: 200px;
        height: 200px;
        opacity: 1;
    }
</style>

<p class="text-effect">鼠标触碰这段文字看看效果</p>

在上面的代码中，我们使用了一个伪元素::before来创建一个聚光灯的效果。当鼠标悬停在文字上时，伪元素的宽度和高度会从0变为200px，同时透明度从0变为1，从而实现聚光灯的效果。你可以调整伪元素的大小、颜色和动画效果来实现不同的特效。

css 鼠标触碰文字 文字特效

要实现鼠标触碰文字时添加文字特效，可以使用CSS的伪类选择器:hover和text-decoration属性。

首先，在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属性用来改变文字阴影颜色。

完整的CSS代码如下：

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

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

这样，当鼠标触碰文字时，文字就会出现下划线，并且文字的颜色和阴影颜色也会发生改变，从而实现了文字特效。