效果圖：
html：
60%
css：
/*進度條*/ .progress-wrap { width: 100%; height: 12px; border-radius: 8px; position: relative; } .progress-wrap span{ position:absolute; left:50%; top:-20px; color:#000; } /*進度條底層背景樣式*/ .progress-inner { height: inherit; background: rgb(142 193 255 / 20%); border-radius: 8px; } /*進度層樣式效果，使用動畫效果*/ .progress-nums { width: 60%; height: inherit; border-radius: 6px; background: repeating-linear-gradient(-45deg, #008bdd 25%, #49beff 0, #49beff 50%, #008bdd 0, #008bdd 75%, #49beff 0); background-size: 16px 16px; animation: panoramic 30s linear infinite; } /*定義動畫*/ @keyframes panoramic{ to { background-position: 200% 0; } }
鄭重聲明：本文內容及圖片均整理自互聯(lián)網，不代表本站立場，版權歸原作者所有，如有侵權請聯(lián)系管理員(admin#wlmqw.com)刪除。
