欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

纯css彩虹进度条

程序员文章站 2022-05-26 19:09:26
...

这里写自定义目录标题


效果

纯css彩虹进度条
代码

<!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>