|
此方法显示 0 到 50% 的比率时运作良好，但如果我们尝试显示 60% 的比率时（比如指定旋转值为 .6turn 时），会出现问题。解决方法：使 用上述技巧的一个反向版本来实现这个范围内的比率：设置一个棕色的伪 元素，让它在 0 至 .5turn 的范围内旋转。因此，要得到一个 60% 比率的饼 图，
伪元素的代码可能是这样的：
html:
复制代码 代码如下:
<div></div>
css:
复制代码 代码如下:
.pie2{
width:140px;
height: 140px;
background: #8BC34A;
border-radius: 50%;
background-image: linear-gradient(to right,transparent 50%,#655 0);
}
.pie2::before{
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background: #655;/*当范围大于50%时,需要改变伪元素的背景颜色为#655;*/
transform-origin: left;
transform: rotate(.1turn);
}
用 CSS 动画来实现一个饼图从 0 变化到 100% 的动画，从而得到一个炫酷的进度指示器：
代码如下：
html:
复制代码 代码如下:
<div></div>
css:
复制代码 代码如下:
.pie3 {
width:140px;
height: 140px;
border-radius: 50%;
background: yellowgreen;
background-image: linear-gradient(to right, transparent 50%, currentColor 0);
color: #655;
}</p>
<p>.pie3::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 3s linear infinite, bg 6s step-end infinite;
}</p>
<p>@keyframes spin {
to { transform: rotate(.5turn); }
}
@keyframes bg {
50% { background: currentColor; }
}
（编辑：威海站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
