linear-gradient+animate实现动态进度条

最新推荐文章于 2025-05-04 09:10:07 发布

原创最新推荐文章于 2025-05-04 09:10:07 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

前端开发专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了一种使用CSS3渐变和动画属性创建动态进度条的方法，通过重复线性渐变实现条纹效果，并利用关键帧动画使条纹流动，展示了如何在网页中实现美观且实用的动态进度指示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态进度条</title>
		<style>
			.wrap{
				width: 200px;
				height: 23px;
				border-radius: 10px;
				/*background: #ffe9ca;*/
				background: linear-gradient(90deg,#ffa84b,#ff7a0c);
				overflow: hidden;
			}
			.wrap .pro{
				width: 200px;
				height: 23px;
				/*way1 不论条纹角度如何，创建双条纹时都需要用到4个色标*/
				background: -webkit-repeating-linear-gradient(-30deg,#ffa84b 0, #ffa84b 10px,#ffb668 10px,#ffb668 20px);
				/*way2*/
				/*background: #ff790c;/*该处为纯色，linear-gradient起不了作用，可将背景色设置到父元素*/
				background-image: repeating-linear-gradient(-30deg,
				 hsla(0,0%,100%,.1),
				 hsla(0,0%,100%,.1) 10px,
				 transparent 0, transparent 20px);
				 -webkit-animation: move 5s linear infinite;
			}
			
			@-webkit-keyframes move{
				0%{
					background-position: 0 0 ;
				}
				100%{
					background-position: -200px 0;
				}
			}
		</style>
	</head>
	<body>
	    <div class="wrap">
	    	<div class="pro">1</div>
	    </div>
	</body>
</html>