css实现环形进度条

news2024/11/18 18:21:38

效果：
在这里插入图片描述
纯css实现进度条，这里用到的核心属性为box-show，box-show可以控制元素的阴影，通过控制元素阴影的移动位置来实现进度条效果。

.box{
   box-show : 0px 0px 0px 0px #ccc;
}

box-show有5个参数

第一个参数：控制元素阴影的左右位置
第二个参数：控制元素阴影的上下位置
第三个参数：控制元素阴影的模糊程度
第四个参数：控制元素阴影的大小（放大&缩小）
第五个参数：设置元素阴影的颜色

前四个参数部分可以省略，例如，box-show: 0px 0px 2px #ccc，这一句就是设置2px的模糊阴影，颜色为#ccc。

下面是代码部分：

<div class="container">
     <div class="shadow">Hover Me</div>
</div>

/* 使用 scss */
$color: #e91e63;

.container{
    position: relative;
    overflow: hidden;
    width: 124px;
    height: 124px;
    margin: 0 auto;
    border-radius: 50%;
}
.shadow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 120px;
    height: 120px;
    line-height: 120px;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 60px -60px 0 2px $color,-60px -60px 0 2px $color,-60px 60px 0 2px $color,60px 60px 0 2px $color;
    text-align: center;

    /* 
    &表示嵌套的上一级对象 这里就指的是shadow
    border 动画名称
    0.5s 持续时间
    ease 慢速开始，然后加快，慢速结束
    forwards 元素保留最后关键帧设置的样式
    */
    &:hover {
        animation: border 0.5s ease forwards;
    }
}


@keyframes border{
  // 先hover隐藏(透明)右上方的线
  0% {
    box-shadow: 60px -60px 0 2px $color, -60px -60px 0 2px $color, -60px 60px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px transparent;
  }
//   右上方的线变成白色
  25% {
    box-shadow: 0 -125px 0 2px $color, -60px -60px 0 2px $color, -60px 60px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px #fff;
  }
//   左上方的线变成白色
  50% {
    box-shadow: 0 -125px 0 2px $color, -125px 0px 0 2px $color, -60px 60px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px #fff;
  }
//   左下方的线变成白色
  75% {
    box-shadow: 0 -125px 0 2px $color, -125px 0px 0 2px $color, 0px 125px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px #fff;
  }
//   右下方的线变成白色
  100% {
    box-shadow: 0 -125px 0 2px $color, -125px 0px 0 2px $color, 0px 125px 0 2px $color, 120px 40px 0 2px $color, 0 0 0 2px #fff;
  } 
}

步骤解释：
这个动画实际上是用了两个box，外层的box比内层的box大4px，左右折算下来分别为左右2px，所以可以看到有一条红色的边线，这个边线其实就是内层box的阴影，超出的部分被外层box的overflow: hidden隐藏了。

box-shadow: 60px -60px 0 2px $color,-60px -60px 0 2px $color,-60px 60px 0 2px $color,60px 60px 0 2px $color;

这里的box-show用了4个阴影，每个阴影所在的位置分别是右上、左上、左下、右下，各占一半，加起来就是一个圆形，然后在动画的每25%移动对应阴影的位置，并且在当前阴影上加第5个阴影，位置和模糊度都为0，放大2px，颜色为白色，所以可以看到白色的线在移动，其实就是移动了盖住的阴影，没有盖住的地方以白色的阴影（线）展示。

animation属性解释：