HTML&CSS ：告别卡顿，LOADING 文字动态效果

玄之 · 发表于 5 天前

这段代码通过纯 CSS 实现了一个动态的“LOADING”文字效果，适合用于加载页面或等待提示。

演示效果

微信图片_20250310091831.gif

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 {
            font-family: sans-serif;
            font-weight: 700;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-size: 5vw;
            background: #bdc3c7;
        }

        .title {
            position: relative;
            color: #262626;
            padding: 20px 50px;
        }

        .title:before {
            background: #262626;
            color: white;
            content: 'LOADING';
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            padding: 20px 50px;
            -webkit-clip-path: polygon(0% 0%, 30% 0%, 30% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 30% 0%, 30% 100%, 0% 100%);
            animation: slide 4s 1s linear infinite;
        }

        @keyframes slide {
            50% {
                -webkit-clip-path: polygon(70% 0%, 100% 0%, 100% 100%, 70% 100%);
            }
        }
    </style>
</head>

<body>
    <div class="title">LOADING</div>
</body>
</html>

HTML 结构

title：定义一个文本容器，显示 LOADING 文字。

CSS 样式

body：设置页面字体、布局方式（居中对齐）、背景颜色和字体大小。
.title：定义文本容器的样式，包括颜色、内边距和相对定位。
.title:before：定义伪元素的样式，用于创建动态的“LOADING”效果。
设置伪元素的背景颜色、文字颜色和内容。
使用 clip-path 定义伪元素的多边形裁剪区域，初始为左上角的三角形。
使用 animation 实现伪元素的动态裁剪效果。
@keyframes slide：定义动画，通过改变 clip-path 的值，使伪元素的裁剪区域从左上角的三角形变为右下角的三角形，从而实现文字的动态显示效果。

[代码特效] HTML&CSS ：告别卡顿，LOADING 文字动态效果

免责声明

回复

最佳新人

荣誉管理

灌水之王

宣传达人

2025蛇年限定

活跃会员

突出贡献

关于我们

服务支持

jiubbs@126.com