CSS3的线性渐变生成动态进度条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态进度条</title>
<style>
#content {
height: 10px;
border-radius: 4px;
background:repeating-linear-gradient(
-135deg,
#3B7FFF 0.5em,
#3B7FFF 1.7em,
#6a9bff 1.7em,
#6a9bff 2.3em
);
-webkit-animation: move 5s linear infinite;
}
@-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 200px 0;
}
}
}
</style>
</head>
<body>
<div id="content"></div>
</body>
</html>
渐变基本语法：
WX20210712-112829.png
效果图如下:
progress.gif
网友评论