这段代码实现了一个具有动态背景、颜色变化和3D阴影的进度条动画。它不仅模拟了加载进度，还通过丰富的视觉效果增强了用户体验。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你。
演示效果
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: #e8e8e8; display: flex; align-items: center; justify-content: center; height: 100vh; } .progress { --progress-color: rgb(184, 20, 255); display: flex; flex-direction: row; align-items: center; justify-content: center; position: relative; z-index: 9999; height: 1.25rem; width: 200px; border-radius: 6px; outline: 1.5px solid #6a6a6b; border: 2px solid transparent; overflow: hidden; transition: all 125ms ease; animation: outline 4s ease infinite; background-color: white; box-shadow: inset 0.2rem 0.2rem 0.5rem #b8b8b9, inset -0.2rem -0.2rem 0.5rem #7c7c7c7c; } .progress::before { content: "loading"; position: absolute; font-weight: 600; font-size: 14px; z-index: 9; animation: colors 4s ease infinite; } .bar { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transform-origin: left center; animation: progress 4s ease infinite; } .bar::before { content: ""; position: absolute; inset: 0; height: 100%; width: 100%; border-radius: 6px; transform-origin: left center; transition: all 125ms ease; background-size: 1.25rem 1.25rem; box-shadow: inset 0.3rem 0.3rem 0.6rem #ffffff8f, inset -0.2rem -0.2rem 0.5rem #77777777; background-image: linear-gradient(45deg, #cccccc33 25%, transparent 0, transparent 50%, #cccccc33 0, #cccccc33 75%, transparent 0, transparent); animation: bar 1s linear infinite; } .bar::after { content: ""; inset: 0; height: 100%; width: 100%; border-radius: 4px; background-color: var(--progress-color); background: linear-gradient(90deg, #3f5efb 0%, #fc466b 100%); } @keyframes outline { from { outline-color: #6a6a6b; } 50% { outline-color: #fac826; } to { outline-color: #fc466b; } } @keyframes colors { from { color: #000; } to { color: #fff; } } @keyframes progress { from { transform: translateX(-100%); } to { transform: translateX(0%); } } @keyframes bar { from { background-position: 0 0; } to { background-position: 2.5rem 0; } } </style> </head> <body> <div class="progress"> <div class="bar"></div> </div> </body> </html>
HTML 结构
- progress：进度条的容器，包含整个进度条的样式和动画。
- bar：进度条的内部元素，用于实现进度条的动态效果。
CSS 样式
- body：设置页面背景颜色、布局方式（居中对齐）和全屏高度。
- .progress：定义进度条的样式，包括大小、背景颜色、边框、阴影和动画效果。
- .progress::before：在进度条上显示“loading”文本，并通过colors动画实现颜色变化效果。
- .bar：定义进度条内部的动画效果，通过progress动画实现水平移动。
- .bar::before：为进度条添加渐变背景和动态阴影效果，通过bar动画实现背景的滚动效果。
- .bar::after：为进度条添加渐变背景颜色，从蓝色到红色的渐变。
- @keyframes outline：定义进度条边框的颜色变化动画。
- @keyframes colors：定义“loading”文本的颜色变化动画。
- @keyframes progress：定义进度条的水平移动动画。
- @keyframes bar：定义进度条背景的滚动动画。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！
