纯css彩虹进度条

这里写自定义目录标题


效果

纯css彩虹进度条_第1张图片
代码


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

你可能感兴趣的:(前端样式,css进度条,创意进度条,漂亮的进度条,纯css进度条,动态进度条)