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

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

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

.text {
  font-size: 24px;
  color: #333;
  text-shadow: 1px 1px 1px #ddd;
}

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

.text:hover {
  box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.5);
}

这里的box-shadow属性用来添加阴影效果，前两个参数表示阴影的偏移量，第三个参数表示阴影的模糊半径，第四个参数表示阴影的扩散程度，最后一个参数表示阴影的颜色和透明度。通过设置颜色为白色，并且设置透明度为0.5，就可以模拟出聚光灯的效果了。

完整的CSS代码如下：

.text {
  font-size: 24px;
  color: #333;
  text-shadow: 1px 1px 1px #ddd;
}

.text:hover {
  box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.5);
}

相关问题

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伪类来实现鼠标触碰文字的特效。例如，可以将文字变色、加粗、加下划线等。以下是一个示例代码：

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

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

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