使用css3完成圆形进度条加载动画

最新推荐文章于 2024-05-13 14:39:47 发布

@CJL

最新推荐文章于 2024-05-13 14:39:47 发布

阅读量511

点赞数

分类专栏：练习

本文链接：https://blog.csdn.net/qq_44109821/article/details/103677373

版权

练习专栏收录该内容

36 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0;margin: 0;}
		body{background: #efefef;font-family:"microsoft yahei";color:#a1a1a1;}	
		.circleProgress-wrapper{width: 100px;height: 100px;margin: 50px auto;position: relative;text-align: center;line-height: 100px}
		.wrapper{width: 50%;height: 100px;position: absolute;overflow: hidden;}
		.right{right: 0}
		.left{left: 0}
		.circle{width: 90px;height: 90px;border:5px solid transparent;border-radius: 50%;}
		.circle-right{border-top-color:#f90;border-right-color:#f90;position: absolute;right: 0;transform:rotate(-135deg);animation:play1 2s linear forwards}
		.circle-left{border-bottom-color:#f90;border-left-color:#f90;position: absolute;left: 0;transform:rotate(225deg);animation:play2 2s ease-out 2s forwards}
		.text-area{font-size: 2em;}
		.title-text{font-style: normal;font-weight: bold;position: absolute;left: 0;right: 0;bottom: -65px;}
		@keyframes play1{
			0%{transform:rotate(-135deg);}
			100%{transform:rotate(45deg);}
		}
		@keyframes play2{
			0%{transform:rotate(225deg);}
			100%{transform:rotate(375deg);}
		}		
	</style>
</head>
<body>
	<div class="circleProgress-wrapper">
		<div class="wrapper right">
			<div class="circle circle-right"></div>
		</div>
		<div class="wrapper left">
			<div class="circle circle-left"></div>
		</div>	
		<span class="text-area">92%</span>
		<em class="title-text">HTML5+CSS3</em>	
	</div>
</body>
</html>

@CJL

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用css3完成圆形进度条加载动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin: 0;} body{background...
复制链接

扫一扫