CSS3渐变进度条加载特效

CSS3渐变进度条加载特效展示

原创已于 2025-06-27 13:44:50 修改 · 346 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

于 2025-06-02 14:39:35 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3渐变进度条加载特效</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
font-family: Arial, sans-serif;
margin: 0;
}

.container {
width: 80%;
max-width: 500px;
text-align: center;
}

.progress-container {
width: 100%;
height: 20px;
background-color: #e0e0e0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

.progress-bar {
height: 100%;
width: 0;
border-radius: 10px;
background: linear-gradient(90deg, #ff5e62, #ff9966);
animation: progress 3s ease-in-out infinite, colors 3s ease-in-out infinite;
background-size: 200% 100%;
transition: width 0.3s ease;
}

@keyframes progress {
0% {
width: 0;
}
50% {
width: 100%;
}
100% {
width: 0;
margin-left: 100%;
}
}

@keyframes colors {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

.loading-text {
color: #666;
font-size: 18px;
margin-bottom: 10px;
}

.website-link {
color: #ff9966;
text-decoration: none;
font-size: 14px;
display: inline-block;
margin-top: 20px;
transition: color 0.3s;
}

.website-link:hover {
color: #ff5e62;
}
</style>
</head>
<body>
<div class="container">
<div class="loading-text">正在加载中，请稍候...</div>
<div class="progress-container">
<div class="progress-bar"></div>
</div>
</div>
</body>
</html>