css半圆鼠标移入变圆

CSS半圆进度条简介

CSS半圆进度条是一种常见的网页设计元素，通过CSS技术来实现。它可以用于展示任务进度、加载状态等。本文将介绍如何使用CSS实现一个简单的半圆进度条。

HTML代码示例：
<div class="circle">
  <div class="mask full">
    <div class="fill"></div>
  </div>
  <div class="mask half">
    <div class="fill"></div>
  </div>
  <div class="inside-circle"></div>
</div>

CSS代码示例：
/**
 * 定义圆的直径和圆弧边框粗细
 */
$circle-diameter: 100px;
$circle-border-width: 10px;

/**
 * 给.circle添加样式
 */
.circle {
  position: relative;
  width: $circle-diameter;
  height: $circle-diameter / 2;
  border-radius: $circle-diameter  $circle-diameter   0 0;
  overflow: hidden;
  transform: rotate(-135deg);
}

/**
 * 给.mask添加样式
 */
.mask {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

/**
 * 给.fill添加样式
 */
.fill {
  position: absolute;
  width: $circle-diameter + $circle-border-width;
  height: $circle-diameter + $circle-border-width;
  top: ($circle-diameter / -2) - ($circle-border-width / 2) - 1;
  left: ($circle-diameter / -2) - ($circle-border-width / 2) - 1;
  border-radius: 50%;
  transform-origin: bottom left;
}

/**
 * 给.full添加样式，表示圆弧的100%部分
 */
.full {
  z-index: 1;
}

/**
 * 给.half添加样式，表示圆弧的50%部分
 */
.half {
  z-index: 2;
}

/**
 * 给.inside-circle添加样式
 * 显示在圆弧的内部的圆形
 */
.inside-circle {
  position: absolute;
  z-index: 3;
  width: $circle-diameter - $circle-border-width * 2;
  height: $circle-diameter - $circle-border-width * 2;
  top: $circle-border-width;
  left: $circle-border-width;
  border-radius: 50%;
  background-color: #fff;
}

运行效果

总结

通过CSS技术，我们可以轻松实现一个简单的半圆进度条。这个进度条可以通过JavaScript来实现动态变化，达到更好的使用体验。以上代码仅为示例，读者可以根据需要进行修改和优化。