HTML&CSS：酷炫文本悬停“大变样”这段代码是一个 HTML 页面，它包含了 CSS 样式，用于创建一个具有动态悬停

这段代码是一个 HTML 页面，它包含了 CSS 样式，用于创建一个具有动态悬停效果的文本特效。文本在鼠标悬停时会显示一个动态的动画效果，同时带有颜色渐变和阴影。

演示效果

HTML&CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #212121;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .button {
            margin: 0;
            height: auto;
            background: transparent;
            padding: 0;
            border: none;
            cursor: pointer;
        }

        .button {
            --border-right: 6px;
            --text-stroke-color: rgba(255, 255, 255);
            --animation-color: #37FF8B;
            --fs-size: 2em;
            letter-spacing: 3px;
            text-decoration: none;
            font-size: var(--fs-size);
            font-family: "Arial";
            position: relative;
            color: transparent;
            -webkit-text-stroke: 1px var(--text-stroke-color);
        }

        .hovertext {
            position: absolute;
            box-sizing: border-box;
            content: attr(data-text);
            color: var(--animation-color);
            width: 0%;
            inset: 0;
            border-right: var(--border-right) solid var(--animation-color);
            overflow: hidden;
            transition: 0.5s;
            -webkit-text-stroke: 1px var(--animation-color);
        }

        .button:hover .hovertext {
            width: 100%;
            filter: drop-shadow(0 0 23px var(--animation-color))
        }
    </style>
</head>

<body>
    <button class="button">
        <span>&nbsp;Hardy&nbsp;</span>
        <span aria-hidden="true" class="hovertext">&nbsp;Hardy&nbsp;</span>
    </button>
</body>

</html>

HTML 结构

button: 创建一个类名为“button”的按钮。
span: 显示按钮的默认文本。
hovertext: 显示悬停时的动态文本。

CSS 样式

body: 设置页面的边距、填充、背景色、显示方式和高度。
.button: 设置按钮的样式，包括边距、高度、背景、内边距、边框、光标和字体大小。
.button (重复定义): 使用 CSS 变量定义按钮的样式，包括字体大小、字体家族、颜色、文本描边等。
.hovertext: 设置悬停文本的样式，包括位置、内容、颜色、宽度、边框、过渡效果和文本描边。
.button:hover .hovertext: 设置鼠标悬停在按钮上时悬停文本的样式，包括宽度和阴影效果。