javascript - 如何用html/css实现简历中的技能进度效果 如图

Question

如何用html/css实现简历中的技能进度效果 如图

---

How to code?

Answer 1

1.可以使用css3的渐变背景 之前写过 不过有点麻烦
比如 http://www.w3cplus.com/css3/create-radia...
2.canvas
比如 http://www.htmleaf.com/html5/html5-canva...
3.svg

Answer 2

用HTML5 的canvas比较方便，纯CSS 也能但是CSS要写吐的

Answer 3

我是通过写把圆弧分解为4个正方形定位在四个角
然后根据百分比来对四个正方形进行显示或隐藏以及旋转角度来达到显示效果

HTML

<p class="circle-level level-1">
    <span class="arc"></span>
    <span class="arc"></span>
    <span class="arc"></span>
    <span class="arc"></span>
    <span class="score">25%</span>
</p>

<p class="circle-level level-2">
    <span class="arc"></span>
    <span class="arc"></span>
    <span class="arc"></span>
    <span class="arc"></span>
    <span class="score">50%</span>
</p>

<p class="circle-level level-3">
    <span class="arc"></span>
    <span class="arc"></span>
    <span class="arc"></span>
    <span class="arc"></span>
    <span class="score">70%</span>
</p>

<p class="circle-level level-4">
    <span class="arc"></span>
    <span class="arc"></span>
    <span class="arc"></span>
    <span class="arc"></span>
    <span class="score">90%</span>
</p>

CSS

.circle-level {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
    background: #CCC;
    border-radius: 50%;
    overflow: hidden;
    line-height: 200px;
    text-align: center;
}

.circle-level:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    width: 170px;
    height: 170px;
    background: #FFF;
    border-radius: 50%;
    z-index: 2;
}

.circle-level .score {
    font-size: 30px;
    position: relative;
    z-index: 3;
}

.circle-level .arc {
    position: absolute;
    background: blue;
    width: 100px;
    height: 100px;
    z-index: 1;
}

.circle-level .arc:nth-child(1) {
    top: 0;
    right: 0;
}

.circle-level .arc:nth-child(2) {
    top: 100px;
    right: 0;
}

.circle-level .arc:nth-child(3) {
    top: 100px;
    right: 100px;
}

.circle-level .arc:nth-child(4) {
    top: 0;
    left: 0;
}

.level-1 .arc:nth-child(2),
.level-1 .arc:nth-child(3),
.level-1 .arc:nth-child(4) {
    display: none;
}

.level-2 .arc:nth-child(3),
.level-2 .arc:nth-child(4) {
    display: none;
}

.level-3 .arc:nth-child(3) {
    transform-origin: 50% 100%;
    transform: rotate(45deg);
}

.level-3 .arc:nth-child(4) {
    display: none;
}

.level-4 .arc:nth-child(4) {
    transform-origin: 0% 0%;
    transform: rotate(45deg);
}

Demo:http://runjs.cn/code/s0iwzlri