HTML&CSS ：惊艳！文本放大镜这段代码是一个HTML页面，它包含CSS样式，用于创建一个带有动态遮罩效果的文本动画

这段代码是一个HTML页面，它包含CSS样式，用于创建一个带有动态遮罩效果的文本动画。文本“Hardy”会通过一个圆形遮罩逐渐模糊和清晰，形成一种动态的视觉效果。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你。

演示效果

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>

        *,
        *:before,
        *:after {
            box-sizing: border-box;
        }

        body,
        html {
            height: 100%;
        }

        body {
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background: tomato;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        }

        .focus {
            font-size: 3rem;
            color: white;
            letter-spacing: 0.2rem;
            line-height: 1;
            position: relative;
            width: 170px;
        }

        .focus:before {
            content: 'Hardy';
            filter: blur(3px);
        }

        .focus:after {
            content: '';
            position: absolute;
            width: 50px;
            height: 50px;
            top: -4px;
            left: 0;
            border-radius: 50%;
            border: 1px solid #fff;
            animation: maskmove 1s linear infinite alternate;
        }

        .focusmask {
            overflow: hidden;
            position: absolute;
            width: 50px;
            border-radius: 50%;
            height: 100%;
            top: 0;
            left: 0;
            background: tomato;
            animation: maskmove 1s linear infinite alternate;
        }

        .focusmaskinner {
            animation: maskinnermove 1s linear infinite alternate;
        }
        
        @keyframes maskmove {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(100px);
            }
        }

        @keyframes maskinnermove {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-100px);
            }
        }
    </style>
</head>

<body>
    <div class="focus">
        <div class="focusmask">
            <div class="focusmaskinner">Hardy</div>
        </div>
    </div>
</body>

</html>

HTML 结构

focus: 创建一个类名为“focus”的div元素，用于包含文本和遮罩效果。
focusmask: 创建一个类名为“focusmask”的div元素，用于包含遮罩效果。
focusmaskinner: 创建一个类名为“focusmaskinner”的div元素，用于显示文本。

CSS 样式

*, *:before, *:after: 重置所有元素的box-sizing属性为border-box。
body, html: 设置页面的高度。
body: 设置页面的内边距、边距、显示方式、对齐方式、背景色和字体。
.focus: 设置文本的样式，包括字体大小、颜色、字母间距、行高、位置和宽度。
.focus:before: 设置文本的伪元素，用于创建模糊效果。
.focus:after: 设置文本的伪元素，用于创建圆形遮罩的边框效果。
.focusmask: 设置遮罩的样式，包括溢出隐藏、位置、尺寸、圆角和背景色。
.focusmaskinner: 设置遮罩内部文本的样式，包括动画效果。
@keyframes maskmove: 定义遮罩的动画效果，使遮罩在水平方向上移动。
@keyframes maskinnermove: 定义遮罩内部文本的动画效果，使文本在水平方向上移动。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！