css实现贝塞尔静态图_使用高级CSS条形图构建静态投资组合

css实现贝塞尔静态图

在上一篇文章中 ，我向您展示了如何构建漂亮的全屏投资组合页面。 在该教程中，我们还学习了如何创建响应式CSS柱形图。 在本教程中，我们将构建另一个吸引人的静态投资组合页面，这次以纯CSS条形图为特色，而无需使用任何外部JavaScript库，SVG或canvas元素！

我们正在建设什么

这是我们将创建的项目：

我们有很多令人兴奋的事情要介绍，所以让我们开始吧！

1.从页面标记开始

页面标记由标题和三个全屏部分组成：

<header class="position-fixed text-lightblue page-header">...</header>
<section class="d-flex justify-content-center align-items-center vh-100">...</section>
<section class="d-flex vh-100 bg-lightwhite">...</section>
<section class="d-flex flex-column justify-content-center align-items-center vh-100 position-relative">...</section>

注意 ：除了元素的特定类之外，我们的标记还包含许多实用程序（帮助程序）类。 我们将使用这种方法使CSS尽可能保持DRY 。 但是，出于可读性考虑，在CSS内，我们将不对通用CSS规则进行分组。

2.定义一些基本样式

按照上面刚刚讨论的内容，我们首先指定一些重置规则以及一些帮助程序类：

:root {
  --gray: #cbcfd3;
  --white: white;
  --black: #1a1a1a;
  --lightwhite: whitesmoke;
  --lightblue: #009dd3;
  --peach: #ff9469;
  --transition-delay: 0.3s;
  --transition-delay-step: 0.3s;
  --skills-width: 120px;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.align-items-end {
  align-items: flex-end;
}

.flex-grow-1 {
  flex-grow: 1;
}

.vh-100 {
  height: 100vh;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.text-center {
  text-align: center;
}

.text-gray {
  color: var(--gray);
}

.text-lightblue {
  color: var(--lightblue);
}

.text-peach {
  color: var(--peach);
}

.bg-white {
  background: var(--white);
}

.bg-lightwhite {
  background: var(--lightwhite);
}

.h1 {
  font-size: 2.5rem;
}

.h2 {
  font-size: 2rem;
}

我们的帮助器类的命名约定受Bootstrap 4的类名启发。

3.构建页面标题

页面标题包括：

• 徽标
• 主导航

<header class="position-fixed bg-white page-header">
  <nav class="d-flex justify-content-between align-items-center">
    <a href="" class=