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

最新推荐文章于 2024-05-05 23:15:32 发布

拂柳小清风

最新推荐文章于 2024-05-05 23:15:32 发布

阅读量119

点赞数

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

版权

实例:

实例步骤:

创建一个外部盒子
在外部盒子内部创建四个小盒子
在矩形条中添加相应样式和过渡属性

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>progress</title>
	<style>
		body{
			background-color: #808080;
		}
		div{
			margin: 10px;
		}
		.two{
			background-color: #CB3F38;
			width: 200px;
			height: 200px;
			float: left;
			margin: 10px;
		}
		.two1{
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background-color: #FF8079;
			margin: 30px 92px 0px 92px;
			animation: two1 1s infinite linear alternate;
		}
		@keyframes two1{
			to{
				transform: translate(0px,30px);
			}
		}
		.two2{
			color: #F97069;
			width: 94px;
			height: 26px;
			margin: 41px 53px 0px 53px;
			font-size:20px; 
			text-align: center;
		}
		.two3{
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background-color: #FF8079;
			margin: 40px 142px 0px 42px;
			animation: two3 1s infinite linear alternate;
		}
		@keyframes two3{
			to{
				transform: translate( 30px,-30px);
			}
		}
		.two4{
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background-color: #FF8079;
			margin: -16px 42px 0px 142px;
			animation: two4 1s infinite linear alternate;
		}
		@keyframes two4{
			to{
				transform: translate( -30px,-30px);
			}
		}
	</style>
</head>
<body>
	<div class="two">
		<div class="two1"> </div>
		<div class="two2">loading ...</div>
		<div class="two3"> </div>
		<div class="two4"> </div>
	</div>
</body>
</html>