这里写自定义目录标题
效果
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="author" content="JiuMeilove"/>
<title>彩虹渐变进度条</title>
<style>
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
background: #191919;
}
body>div:first-of-type {
width: 100%;
max-width: 260px;
height: 6px;
background: #e1e4e8;
border-radius: 3px;
overflow: hidden;
}
body>div:first-of-type > span:first-of-type {
display: block;
height: 100%;
background: -webkit-gradient(linear, left top, right top, from(#ffd33d), color-stop(17%, #ea4aaa), color-stop(34%, #b34bff), color-stop(51%, #01feff), color-stop(68%, #ffd33d), color-stop(85%, #ea4aaa), to(#b34bff));
background: linear-gradient(90deg, #ffd33d, #ea4aaa 17%, #b34bff 34%, #01feff 51%, #ffd33d 68%, #ea4aaa 85%, #b34bff);
background-size: 300% 100%;
-webkit-animation: progress-animation 6s linear 1s infinite,width-animation 10s ease-in-out infinite;
animation: progress-animation 6s linear 1s infinite,width-animation 10s ease-in-out infinite;
/*animation-name: progress-animation,width-animation ;
animation-duration:2s,12s;
animation-timing-function:linear,ease-in-out;
animation-iteration-count:infinite,infinite;*/
}
@-webkit-keyframes progress-animation {
0% {
background-position: 100%;
width: 0%;
}
50%{
width: 50%;
}
100% {
background-position: 0;
width: 100%;
}
}
@keyframes progress-animation {
0% {
background-position: 100%;
width: 0%;
}
50%{
width: 50%;
}
100% {
background-position: 0;
width: 100%;
}
@-webkit-keyframes width-animation{
0%{
width: 0%;
}
100%{
width: 100%;
}
}
@keyframes width-animation{
0%{
width: 0%;
}
100%{
width: 100%;
}
}
</style>
</head>
<body>
<div class="progress"> <span class="progress-bar" style="width: 75%"></span> </div>
</body>
</html>