阅读 298

前端学习笔记:使用CSS+JS实现半圆环进度条

前言

我所在的公司是一家电商公司,用户最常使用的场景就是领取优惠券。最近,我们公司决定修改“领券中心”的呈现效果,于是优惠券有了一个新的展现方式。

那么,要怎么去实现这样的样式呢?查了一下淘宝,PC端做了限制,无法直接查看手机端的优惠券效果;京东倒是上看到优惠券的样式,可都是直的,没什么难度。最后还是在苏宁上找到了类似的样式,发现是通过SVG来实现的。

此前我没有接触过SVG,这个项目也急着上线,所以我想通过掌握的CSS+JS来实现这个呈现效果。

实现过程

具体的思路是这样的:

  • 首先画两个半圆组成一个圆环。
  • 再画一个倒着的半圆,通过overflow:hidden隐藏。
  • 通过JS获取到优惠券的领取百分比。
  • 将倒着的半圆通过CSS3的transform的rotate属性进行旋转,旋转角度由优惠券的领取百分比决定。

html部分

<div class="progress-box">
   <div class="progress-circle"></div>
   <div class="progress-rotate"></div>
   <div class="progress-inner-circle"></div>
</div>
复制代码

CSS部分

.progress-box {
    width: 100px;
    height: 50px;
    overflow: hidden;
    position: relative;
    margin: 100px auto 0px;
}

.progress-circle {
    width: 100px;
    height: 50px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px; 
    background: #d5aa7c;
}

.progress-inner-circle {
    width: 90px;
    height: 45px;
    border-top-left-radius: 45px;
    border-top-right-radius: 45px; 
    position: absolute;
    top: 5px;
    left: 5px;
    background: #e9c6a2;
}

.progress-rotate {
    width: 100px;
    height: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px; 
    background: #fff;
    transform-origin: center top;
}
复制代码

JS部分(为了方便演示,使用了jQuery)

let rotate = 180* Math.random();
$(".progress-rotate").css({
    "transform": "rotate(" + rotate + "deg)"
})
复制代码

最终呈现效果

去掉progress-box的overflow属性我们看到其实是这样的

结语

可以看到,最后展现的效果没有设计图美观,但是已经够用了。也不知道有没有别的实现方式~好了,接下来就要老老实实学习SVG的知识了--!

关注下面的标签,发现更多相似文章
评论