这段代码通过纯 CSS 实现了一个动态的“LOADING”文字效果，适合用于加载页面或等待提示。
演示效果
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 的值，使伪元素的裁剪区域从左上角的三角形变为右下角的三角形，从而实现文字的动态显示效果。
| 
