效果圖：
html：
60%
css：
/*進(jìn)度條*/ .progress-wrap { width: 100%; height: 12px; border-radius: 8px; position: relative; } .progress-wrap span{ position:absolute; left:50%; top:-20px; color:#000; } /*進(jìn)度條底層背景樣式*/ .progress-inner { height: inherit; background: rgb(142 193 255 / 20%); border-radius: 8px; } /*進(jìn)度層樣式效果，使用動(dòng)畫效果*/ .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; } /*定義動(dòng)畫*/ @keyframes panoramic{ to { background-position: 200% 0; } }
上篇：css 漸變跟隨鼠標(biāo)光標(biāo)按鈕動(dòng)畫
