css 饼图

CSS 饼图可以使用 CSS 的 transform 和伪元素来实现。以下是一个示例代码：

HTML 代码：

<div class="pie"></div>

CSS 代码：

.pie {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ccc;
  box-shadow: inset 0 0 0 50% #fff;
}

.pie::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #f00;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

在这个示例中，我们首先创建了一个圆形的 `.pie` 元素，并将其背景色设置为灰色。然后，我们使用 `box-shadow` 属性将其填充为白色。接下来，我们使用 `::before` 伪元素来创建饼图的扇形部分，并将其颜色设置为红色。我们使用 `transform` 属性将其旋转了 45 度，并使用 `transform-origin` 属性将旋转中心点设置在它的右下角。

你可以根据需要更改圆形的大小、颜色和旋转角度来创建不同的饼图。

相关问题

用css3写饼图

可以使用CSS3的transform属性和伪元素来绘制饼图。以下是一个简单的饼图示例：

HTML代码：

<div class="pie-chart">
  <div class="pie-chart__slice slice1"></div>
  <div class="pie-chart__slice slice2"></div>
  <div class="pie-chart__slice slice3"></div>
  <div class="pie-chart__slice slice4"></div>
</div>

CSS代码：

.pie-chart {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ddd;
  transform: rotate(-90deg);
}

.pie-chart__slice {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  clip: rect(0, 100px, 200px, 0);
  border-radius: 50%;
  transform-origin: center center;
}

.slice1 {
  background-color: #f00;
  transform: rotate(0deg);
}

.slice2 {
  background-color: #0f0;
  transform: rotate(45deg);
}

.slice3 {
  background-color: #00f;
  transform: rotate(90deg);
}

.slice4 {
  background-color: #ff0;
  transform: rotate(135deg);
}

.slice1::before,
.slice2::before,
.slice3::before,
.slice4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: inherit;
  transform-origin: center center;
}

.slice1::before {
  transform: rotate(30deg);
}

.slice2::before {
  transform: rotate(75deg);
}

.slice3::before {
  transform: rotate(120deg);
}

.slice4::before {
  transform: rotate(165deg);
}

首先，创建一个圆形容器，使用`border-radius`属性将其变成圆形，并使用`transform`属性将其旋转-90度，使其起始点位于正上方。

接下来，创建四个切片元素，使用`position: absolute`将其定位在圆形容器的中心。每个切片元素都有不同的背景颜色，并使用`transform`属性将其旋转不同的角度，以形成饼图的不同部分。

为了使切片看起来像是从圆心开始的，我们使用`clip`属性将每个切片元素的大小限制为半径的一半，使其只显示在圆形容器的左上方。然后，使用伪元素在每个切片元素内部创建一个圆形，使其填充整个切片，从而使其看起来像是从圆心开始的。

最后，使用`transform-origin`属性将切片元素和伪元素的变换原点设置为它们的中心，以使它们旋转时绕着圆心旋转。

css在鼠标触碰卡片之后，卡片的背景颜色 以 饼图进度条 的动画形式来改变颜色

可以使用CSS的transition和transform属性来实现饼图进度条的动画效果。具体实现步骤如下：

1. 首先定义卡片的基础样式，包括背景颜色和圆角等。

.card {
  background-color: #fff;
  border-radius: 10px;
}

2. 定义鼠标悬浮时的样式，包括背景颜色和过渡效果等。

.card:hover {
  background-color: #ffcc00;
  transition: background-color 0.3s ease-in-out;
}

3. 使用伪类元素:before和:after来创建饼图进度条的效果。

.card:hover:before,
.card:hover:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #fff;
  transform-origin: 100% 50%;
  border-radius: 10px;
}

.card:hover:before {
  z-index: 1;
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
}

.card:hover:after {
  z-index: 2;
  transform: rotate(180deg);
  transition: transform 0.3s ease-in-out;
}

4. 在:before和:after的样式中，使用transform属性来实现旋转效果。同时，使用z-index属性将:before放在:after的前面，以便在旋转时可以看到饼图进度条的动画效果。

完整的代码如下：

.card {
  background-color: #fff;
  border-radius: 10px;
  position: relative;
  width: 200px;
  height: 150px;
}

.card:hover {
  background-color: #ffcc00;
  transition: background-color 0.3s ease-in-out;
}

.card:hover:before,
.card:hover:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #fff;
  transform-origin: 100% 50%;
  border-radius: 10px;
}

.card:hover:before {
  z-index: 1;
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
}

.card:hover:after {
  z-index: 2;
  transform: rotate(180deg);
  transition: transform 0.3s ease-in-out;
}

效果如下图所示：