css3做一个曲线图文创

CSS3是前端开发领域中的一项重要技术，它有很多有趣的特性，在此我们将使用CSS3创建一个曲线图文创。

.curved-graph {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  background-color: #f7f7f7;
}

.graph-container {
  position: relative;
  width: 600px;
  height: 300px;
}

.line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #333;
}

.dot {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 10px;
  background-color: #333;
  border-radius: 50%;
}

.dot1 {
  left: 10%;
}

.dot2 {
  left: 30%;
}

.dot3 {
  left: 50%;
}

.dot4 {
  left: 70%;
}

.dot5 {
  left: 90%;
}

.curve {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #333;
  transform: translate(0,-50%);
  border-radius: 50%;
}

.curve1 {
  width: 20%;
  height: 50px;
  transform: translate(10%,-50%);
}

.curve2 {
  width: 20%;
  height: 150px;
  transform: translate(30%,-50%);
}

.curve3 {
  width: 20%;
  height: 200px;
  transform: translate(50%,-50%);
}

.curve4 {
  width: 20%;
  height: 150px;
  transform: translate(70%,-50%);
}

.curve5 {
  width: 20%;
  height: 50px;
  transform: translate(90%,-50%);
}

代码如上所述，我们分别使用.dot和.curve类来创建所有的点和曲线，这些元素都使用了绝对定位进行定位。

我们还使用了.flexBox布局技术，将所有元素位置居中，实现了一个漂亮的图形。

这个图形可以用来呈现各种可视化数据，如销售统计、用户量等等，使得数据更加直观、生动。