【css酷炫效果】純CSS實現進度條加載動畫
- 緣
- 創作背景
- html結構
- css樣式
- 完整代碼
- 基礎版
- 進階版
- 效果圖
通過CSS漸變與背景位移動畫，無需JavaScript即可創建流體動態進度條。
想直接拿走的老板，鏈接放在這里：https://download.csdn.net/download/u011561335/90490485
緣
創作隨緣，不定時更新。
創作背景
剛看到csdn出活動了，趕時間，直接上代碼。
html結構
<div class="progress-bar"><div class="progress"></div>
</div>
css樣式
.progress-bar {width: 300px;height: 20px;background: #eee;border-radius: 10px;overflow: hidden;
}.progress {width: 100%;height: 100%;background: linear-gradient(90deg, #3498db 25%, #9b59b6 50%, #e74c3c 75%);background-size: 200% 100%;animation: flow 2s linear infinite;transform-origin: left;/* transform: scaleX(0.7); 設置當前進度70% */
}@keyframes flow {0% { background-position: 100% 0; }100% { background-position: 0% 0; }
}
完整代碼
基礎版
<!DOCTYPE html>
<html>
<head>
<style>
.progress-bar {width: 300px;height: 20px;background: #eee;border-radius: 10px;overflow: hidden;
}.progress {width: 100%;height: 100%;background: linear-gradient(90deg, #3498db 25%, #9b59b6 50%, #e74c3c 75%);background-size: 200% 400%;animation: flow 2s linear infinite;transform-origin: left;
}@keyframes flow {0% { background-position: 100% 0; }100% { background-position: 0% 0; }
}
</style>
</head>
<body><div style='text-align:center;margin-top:50px;'><div class="progress-bar"><div class="progress"></div></div></div></body>
</html>
進階版
<!DOCTYPE html>
<html>
<head>
<style>
.progress-bar {width: 300px;height: 20px;background: #eee;border-radius: 10px;overflow: hidden;
}.progress {width: 100%;height: 100%;background: linear-gradient(90deg, #3498db 25%, #9b59b6 50%, #e74c3c 75%);background-size: 200% 400%;animation: flow 2s linear infinite;transform-origin: left;background: repeating-linear-gradient(-45deg,#3498db,#3498db 10px,#2980b9 10px,#2980b9 20px);background-size: 200% 100%;box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);border-right: 3px solid rgba(255,255,255,0.3);transition: transform 0.3s ease-out;
}@keyframes flow {0% { background-position: 100% 0; }100% { background-position: 0% 0; }
}
</style>
</head>
<body><div style='text-align:center;margin-top:50px;'><div class="progress-bar"><div class="progress"></div></div></div></body>
</html>
效果圖
)
