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，从而实现聚光灯的效果。你可以调整伪元素的大小、颜色和动画效果来实现不同的特效。