持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

需求

UI小姐姐做出来一个半圆形的圆弧效果图交给前端做，样式如图：

思路

静态图真简单，想用css实现就麻烦了，一开始想通过div添加after伪类实现半圆边框，可以倒也可以实现，但也是需要单独构造一个矩形，然后添加左下右三个边框并设置好相应border-radius，不够直观。后来通过度娘找到了一位网友的办法，使用svg元素构成，这样实现起来比较直观，易于理解推广。

实现

step1

创建一个div，定义好背景图片,这里样式名称用的tailwindcss，便于统一

 <div class="w-64 h-64  group flex flex-col items-center justify-center hover:cursor-pointer">
     <div class="rounded-full  w-56 h-56" style="background:url(/image/dd.png);transform:scale(0.9)">
     </div>
     ...后续代码
 </div>

step2

第二步，上面的盒子中添加一个固定大小的svg区域，在中间画一个圆，大小要根据svg的大小来定，这里因为svg边长是256，所以圆的中心点是(128,128)，半径是126，这样就不会溢出

/*html*/
 <svg  viewBox="0 0 256 256" class="absolute w-64 h-64 stroke-current transition-all duration-250  group-hover:block hidden delay-200 "> 
    <circle class="circle" cx='128' cy='128' r='126'></circle>
</svg>

step3

对circle节点添加的类名也叫circle，然后在css文件中定义好圆圈样式。同时，加了加载动画，当鼠标移上去的时候，显示svg，并运行加载动画。

/*css文件*/
.circle{
    position: absolute;
    fill: none;
    stroke-width: 3px;
    stroke-dashoffset: 0;
    stroke-dasharray: 395; 
    stroke-linecap: square;
    stroke: #282d89;
    animation: load 2s;
}

需要注意的是，为了达到效果，需要对其中的部分属性值进行设计，stroke-dasharray的395是计算出来的，半径r * 3.14 约等于 395,这样，最后虚线正好就占了半圆

step3 重要步骤

这里对circle添加了动画属性，load 2s表示执行2s钟的load动画，添加以下load动画的代码：

/*css*/
@keyframes load {
  0% {
      stroke-dashoffset: 0;
      stroke-dasharray: 0;
  }
}

这样就完成了。最终的效果

css动画1.gif

总结

这里需要注意几个属性值：stroke-dashoffset、stroke-dasharray、stroke-linecap。这里顺便把几个属性的介绍贴一下，方便不明白的同学对照。详细的学习可以参考掘友文章 SVG：理解stroke-dasharray和stroke-dashoffset属性 - 掘金 (juejin.cn)

stroke-dashoffset 属性指定了 dash 模式到路径开始的距离。
stroke-dasharray 控制用来描边的点划线的图案范式。
stroke-linecap 属性指定了，在开放子路径被设置描边的情况下，用于开放自路径两端的形状。

stroke-dashoffset这个是表示线段偏移量，具体效果是要结合第二个属性stroke-dasharray使用，这个stroke-dasharray属性非常厉害，可以定义整条线段的占空比（占空比从模电中借来的概念，我觉得放在这里很合适），就是虚线和实线的长短，极端一点来说，整个线段是1，如果定义虚线长为1，那么效果就是啥也看不见，但是你再设置以下偏移量，发现实线部分就露了出来，这就是两个属性结合的妙处。可以构建各式各样的动画，比如从0到100的进度条动画。我们尝试着修改一下，看一下几种变化

css动画2.gif