css实现圆形进度条

css实现圆形进度条

先来看一下效果图:
在这里插入图片描述
具体实现步骤:

  1. 先画一个大圆,底色为#ffffff;
    在这里插入图片描述
 <div class="third"> </div>
.third{
    background-color: #FFFFFF;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    position: relative;
}
  1. 再画一个浅绿色的圆和一个与与第一个圆一样的圆
    在这里插入图片描述
<div class="third">
           <div class="second"></div>
           <div class="first"></div>
</div>
.second{
    background-color: #6ED4BF;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    clip:rect(0,91px,auto,0);
    position: absolute;
}
.first{
    background-color: #FFFFFF;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    clip:rect(0,auto,auto,91px);
}

3.将second圆根据百分比旋转
在这里插入图片描述

.second{
    background-color: #6ED4BF;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    clip:rect(0,91px,auto,0);
    position: absolute;
    transform: rotate(30deg);  //旋转30度
}
  1. 最后再画一个小圆,写上百分比
    在这里插入图片描述
 <div class="third">
          <div class="second"></div>
          <div class="first"></div>
          <div class="mask">
               <span>68%</span>
          </div>
  </div>
.third *{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

这样圆就是在中心了

.mask>span{
    display: block;
    font-size: 44px;
    color: white;
    line-height: 150px;
}
  • 7
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
实现一个圆形进度条的动态效果,可以使用CSS中的@keyframes动画和transform属性。 首先,创建一个包含圆形进度条的div元素,并设定其宽高和边框样式,使它呈现为圆形。 然后,使用CSS的@keyframes创建一个动画序列,在序列中设置进度条的旋转角度。例如,可以从0°开始旋转,到360°结束,表示进度条的完整程度。 接下来,在CSS中,为进度条的div元素添加animation属性,将刚才创建的动画序列应用于进度条上,并设定动画的持续时间、重复次数等。 最后,通过设置transform-origin属性,将进度条的旋转中心设置为圆心,使得进度条动画在圆形元素中心点进行旋转,形成动态效果。 例如,下面是一个实现50%进度的圆形进度条CSS代码示例: ```css .circle { width: 100px; height: 100px; border: 5px solid #ccc; border-radius: 50%; animation: progress 2s linear infinite; transform-origin: center center; } @keyframes progress { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } ``` 这个示例中,圆形进度条的宽高为100px,边框为5px粗的灰色线条。动画序列progress中,进度条从0°开始旋转到180°,持续2秒,线性变化,并无限循环播放。进度条的旋转中心被设置为圆心。 这样,通过CSS实现了一个圆形进度条的动态效果。可以根据需要修改代码中的数值,实现不同的进度和动画效果。
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值