今天和大家分享一組代碼，使用css制作進度條。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>進度條</title> <style> @keyframes test { from{left:0;} to{left:-100%;} } #box{ width:400px; height:50px; margin: 50px auto; position: relative; border: 1px solid #000; overflow: hidden; } #div1{ width:200%; height:100%; position: absolute; left:0; top:0; background: -webkit-repeating-linear-gradient(-45deg, skyblue 0px,skyblue 10px,deeppink 10px,deeppink 20px); animation:4s test linear infinite; } </style> </head> <body> <div id="box"> <div id="div1"> </div> </div> </body> </html>
效果圖：
這個效果圖是一個動圖，顏色可以自己設置，我選擇的是天藍色和深粉色。