css repeating-linear-gradient实现条纹进度条效果

html :

<!DOCTYPE html>
<html>
<head>
    <title>模拟进度条条纹样式</title>
    <link rel="stylesheet" href="style_stripe.css">
</head>
<body>
    <div class="progress_bar"></div>
</body>
</html>

css:

.progress_bar{
    height: 40px;
    width: 700px;
    background: #58a;
    background-image: repeating-linear-gradient(30deg,
    hsla(0,0%,100%,.1),
    hsla(0,0%,100%,.1) 15px,
    transparent 0,transparent 30px);
    border-radius: 5px;
}

最终效果如下：
在这里插入图片描述

版权声明：本文为hhthht8888原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。