7个简单进度条制作(三)

最新推荐文章于 2022-12-06 22:52:30 发布

拂柳小清风

最新推荐文章于 2022-12-06 22:52:30 发布

阅读量123

点赞数

本文链接：https://blog.csdn.net/Great_Wow/article/details/108529947

版权

实例:

实例步骤:

创建一个外部盒子
在盒子左侧创建一个div盒子,用border-radius变成圆形

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>progress</title>
	<style>
		body{
			background-color: #808080;
		}
		div{
			margin: 10px;
		}
		.three{
			background-color: #FFA773;
			width: 200px;
			height: 200px;
			float: left;
		}
		.three1{
			color: #CE743B;
			width: 94px;
			height: 26px;
			margin-top: 67px;
			margin-left: 50px;
			font-size:20px; 
			text-align: center;
		}
		.three2{
			width: 16px;
			height: 16px;
			border-radius: 50%;
			margin-top: 15px;
			margin-left: 20px;
			animation: four2 1.5s infinite linear;
		}
        /* 关键帧设置 */
		@keyframes three2{
			0%{
				width: 16px;
				height: 16px;
				border-radius: 50%;
				background-color: #FFA773;
			}
			50%{
				width: 25px;
				height: 25px;
				border-radius: 50%;
				background-color: #CE743B;
				transform: translate(60px,0px);
			}
			100%{
				width: 16px;
				height: 16px;
				border-radius: 50%;
				background-color: #FFA773;
				transform: translate(130px,0px);
			}
		}
	</style>
</head>
<body>
	<div class="three">
		<div class="three1">loading ...</div>
		<div class="three2"> </div>
	</div>
</body>
</html>