前端基础笔记——动态圆环渐变进度条

前提知识clip属性，transition属性，transform属性

clip属性干货

	<div class="circle">
		<div class="left"></div>
		<div class="right"></div>
		<!-- 一层圆心遮罩 -->
		<div class="circle_c">60%</div>
	</div>

		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			.circle{
				background-image: linear-gradient(to top,green,blue);
				border-radius: 50%;
				width: 100px;
				height: 100px;
				display: inline-block;
				position: relative;
			}
			.circle_c{
				position: absolute;
				top: 10px;
				left: 10px;
				width: 80px;
				height: 80px;
				border-radius: 50%;
				background: white;
				display: flex;
				justify-content: center;
				align-items: center;
			}