css 渐变实现进度条动画

最新推荐文章于 2023-07-25 12:43:13 发布

sam80000

最新推荐文章于 2023-07-25 12:43:13 发布

阅读量959

点赞数

分类专栏：前端知识点文章标签： css3 css

本文链接：https://blog.csdn.net/sam80000/article/details/110190727

版权

前端知识点专栏收录该内容

35 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
/* 			=====================================
			运用知识：背景图渐变色 linear-gradient、
					animation动画、
					background-position 背景定位
			实现思路：先用渐变调出颜色背景，再用动画实现	运动	
			
			===================================== */

				.box{width: 300px; height: 40px; border: 1px black solid; margin: 100px auto;
					background-image: linear-gradient(to right top,#999 25%,#080 25%,#080 50%,#999 50%,#999 75%,#080 75%);
					background-size: 30px 40px; 
					animation: jindu 5s infinite linear;
				}
				
				@keyframes jindu{
					from{background-position: 0 0;}
					to{background-position: 300px 0;}
				}
		</style>
	</head>
	<body>
			<div class="box"></div>
	</body>
</html>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sam80000

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css 渐变实现进度条动画

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css">/* =============================
复制链接

扫一扫