使用css3绘制出各种几何图形(5)

发布时间：2020-03-16 13:14 所属栏目：52 来源：站长网

导读：此方法显示 0 到 50% 的比率时运作良好，但如果我们尝试显示 60% 的比率时（比如指定旋转值为 .6turn 时），会出现问题。解决方法：使用上述技巧的一个反向版本来实现这个范围内的比率：设置一个棕色的伪元素，让

此方法显示 0 到 50% 的比率时运作良好，但如果我们尝试显示 60% 的比率时（比如指定旋转值为 .6turn 时），会出现问题。解决方法：使用上述技巧的一个反向版本来实现这个范围内的比率：设置一个棕色的伪元素，让它在 0 至 .5turn 的范围内旋转。因此，要得到一个 60% 比率的饼图，

伪元素的代码可能是这样的：
html:

复制代码

代码如下:

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:

复制代码

代码如下:

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; }
}

（编辑：ASP站长网）