效果图：
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; } }
郑重声明：本文内容及图片均整理自互联网，不代表本站立场，版权归原作者所有，如有侵权请联系管理员(admin#wlmqw.com)删除。
