效果预览：
涉及到的知识：变形透视动画transform、过渡延迟transition、帧动画animation
实现思路：利用元素的border属性绘制圆圈，利用元素的父盒子宽度只有子盒子的一半隐藏(overflow)子盒子部分border，旋转子盒子tranform:rotate(-135deg)以达到动态变化的效果。这里主要注意的点就是两个半圈动画开始和结束时间，需要无缝衔接。
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆圈进度条</title>
<style>
.wrap {
width: 200px;
height: 200px;
margin: 0 auto
最低0.47元/天 解锁文章
扫一扫
1339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
