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="text-peach logo">
      <strong>DM</strong>
    </a>
    <ul class="d-flex">
      <li>
        <a href="#skills">Skills</a>
      </li>
      <li>
        <a href="#contact">Contact</a>
      </li>
    </ul>
  </nav>
</header>

标头CSS

.page-header {
  left: 0;
  right: 0;
  top: 0;
  padding: 20px;
  z-index: 10;
}

.page-header .logo {
  font-size: 1.7rem;
}

.page-header li:not(:last-child) {
  margin-right: 20px;
}

.page-header a {
  font-size: 1.1rem;
}

4.建立英雄区

我们页面的第一部分包括：

• 标题
• 号召性用语

它将是这样的：

第1节HTML

<section class="d-flex justify-content-center align-items-center vh-100">
  <h1 class="text-center h1">...</h1> 
  <div class="position-absolute scroll-down">...</div>  
</section>

第1节CSS

号召性用语包括一条细线，该细线可以无限地进行动画处理，迫使用户向下滚动以查看“首屏”下方的内容（ 可能存在或不存在 ）。

其样式：

.scroll-down {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  text-transform: uppercase;
  transition: all 0.5s;
}

.scroll-down.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.scroll-down::after {
  content: '';
  display: block;
  margin: 3px auto 0;
  width: 1px;
  height: 60px;
  background: var(--black);
  transform-origin: bottom;
  animation: pulse 3.5s infinite linear;
}

@keyframes pulse {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.65);
  }
  100% {
    transform: scaleY(1);
  }
}

第1节JavaScript

最初，号召性用语将可见。 但是，当用户开始滚动时，它将消失。 更具体地说，它将收到我们刚刚在上面的样式中定义的is-hidden类。

这是必需JavaScript代码：

const scrollDown = document.querySelector(".scroll-down");

window.addEventListener("scroll", scrollHandler);

function scrollHandler() {
  window.pageYOffset > 0
    ? scrollDown.classList.add("is-hidden")
    : scrollDown.classList.remove("is-hidden");
}

5.建立第2节

页面的第二部分包括：

• 背景图片
• 展示网络技能的条形图

看起来是这样的：

第2节HTML

<section class="d-flex vh-100 bg-lightwhite" id="skills">
  <div class="position-relative flex-grow-1 bg-img"></div>
  <div class="d-flex justify-content-center align-items-center flex-grow-1">
    <div class="position-relative chart-wrapper">
      <ul class="d-flex flex-column chart-skills">
        <li class="position-relative">
          <span>CSS</span>
        </li>
        ...
      </ul>
      <ul class="d-flex position-absolute chart-levels">
        <li class="flex-grow-1 position-relative">
          <span class="position-absolute">Novice</span>
        </li>
        ...
      </ul> 
    </div>
  </div>
</section>

设置背景图片的样式

本部分的左侧包含图片摘自Envato Elements上的Wordpress Code Backgrounds 。 这将为我们提供所需的氛围，同时启发我们在设计中其他地方使用的颜色：

一些关键的事情：

• 图像将出现在大于900px的屏幕上，并且
• 我们将使用CSS（通过background-image属性）而不是HTML（通过img元素）将图像放置在页面中。 我们选择此方法是因为它使我们可以轻松地增强图像外观。 例如，我们将利用它的::after伪元素来使其倾斜。 您甚至可以使用background-blend-mode: luminosity来播放其颜色background-blend-mode: luminosity例如background-blend-mode: luminosity 。

注意：默认情况下， img是一个空元素，没有伪元素。

对应的样式：

.bg-img {
  background: #fff url(bg-programming.jpg) no-repeat center / cover;
}

.bg-img::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 7rem;
  background: var(--lightwhite);
  transform: skew(-5deg);
  transform-origin: left bottom;
}

@media screen and (max-width: 900px) {
  .bg-img {
    display: none;
  }
}

设置图表样式

在这一点上，我们将专注于演示中最具挑战性的部分； 如何构建条形图。

图表将有两个轴。 在y轴上，我们将放置网络技能（CSS，HTML，JavaScript，Python，Ruby）。 在另一个x轴上，我们将放置技能级别（新手，初学者，中级，高级，专家）。

y轴

在标记方面，每个技能都是一个放在.chart-skills列表内的列表项。 接下来，每个列表项将其文本保留在span元素内，如下所示：

<ul class="chart-skills">
  <li class="position-relative">
    <span>CSS</span>
  </li>
  ...
</ul>

我们为span元素定义了等于120px的固定宽度。 为了避免重复，我们可以轻松地更改此值（因为其他值将取决于它），让我们将其存储在CSS变量中：

:root {
  --skills-width: 120px;
}

.chart-wrapper .chart-skills span {
  display: inline-block;
  width: var(--skills-width);
  padding: 15px;
}

每个列表项将包含其自己的::before和::after伪元素：

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-skills li::before,
.chart-wrapper .chart-skills li::after {
  content: '';
  position: absolute;
  top: 25%;
  left: var(--skills-width);
  height: 50%;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 2;
}

::after伪元素将具有浅灰色和静态宽度，该静态宽度是通过从列表项宽度中减去span宽度来计算的：

.chart-wrapper .chart-skills li::after {
  width: calc(100% - var(--skills-width));
  background: rgba(211, 211, 211, 0.3);
}

外观如下：

所有::before伪元素的初始宽度将为0：

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-skills li::before {
  width: 0;
  background: var(--lightblue);
  transition: width 0.65s ease-out;
}

但是，一旦图表在视口中可见，它们的宽度就会被设置为动画，并接收一个值，该值将由相关的技能级别决定：

在视图中添加类

有多种方法可以检测元素在视口中是否可见。 让我们利用从一个古老而流行的StackOverflow线程中提取的以下便捷功能：

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

因此，回到工作中！ 当图表在当前视口中可见时，我们将其设为in-view类。

这是完成此工作JavaScript代码：

const chartWrapper = document.querySelector(".chart-wrapper");

window.addEventListener("scroll", scrollHandler);

function scrollHandler() {
  if (isElementInViewport(chartWrapper)) chartWrapper.classList.add("in-view");
}

::before伪元素应按顺序进行动画处理。 为了给他们所需的过渡速度，我们将使用另外两个CSS变量以及calc() CSS函数。

以下是负责揭示这些sudo元素CSS样式：

:root {
  ...
  --transition-delay: 0.3s;
  --transition-delay-step: 0.3s;
  --skills-width: 120px;
}

.chart-wrapper.in-view .chart-skills li:nth-child(1)::before {
  width: calc(90% - var(--skills-width));
  transition-delay: var(--transition-delay);
}

.chart-wrapper.in-view .chart-skills li:nth-child(2)::before {
  width: calc(75% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step)
  );
}

.chart-wrapper.in-view .chart-skills li:nth-child(3)::before {
  width: calc(62% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 2
  );
}

.chart-wrapper.in-view .chart-skills li:nth-child(4)::before {
  width: calc(49% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 3
  );
}

.chart-wrapper.in-view .chart-skills li:nth-child(5)::before {
  width: calc(38% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 4
  );
}

请记住，Microsoft Edge不支持上述数学运算，因此，如果需要支持，只需传递一些静态值即可，如下所示：

.chart-wrapper.in-view .chart-skills li:nth-child(2)::before {
  transition-delay: 0.6s;
}

.chart-wrapper.in-view .chart-skills li:nth-child(3)::before {
  transition-delay: 0.9s;
}

X轴

在标记方面，每个级别都是一个放在.chart-levels列表内的列表项。 接下来，每个列表项将其文本保留在span元素内，如下所示：

<ul class="d-flex position-absolute chart-levels">
  <li class="flex-grow-1 position-relative">
    <span class="position-absolute">Novice</span>
  </li>
  ...
</ul>

注意事项：

• 我们将列表设置为flex容器。 另外，我们绝对定位它，并为其左填充使其等于第一个列表的span的宽度。
• 我们给列表项flex-grow: 1增长并占用所有可用空间。
• span s位于其父级列表项的最底部。

该列表的关联样式：

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-levels {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding-left: var(--skills-width);
}

.chart-wrapper .chart-levels li {
  border-right: 1px solid rgba(211, 211, 211, 0.3);
}

.chart-wrapper .chart-levels li:last-child {
  border-right: 0;
}

.chart-wrapper .chart-levels span {
  bottom: 0;
  transform: translateY(50px) rotate(45deg);
  padding: 10px;
  width: 100%;
}

6.构建第3节

该页面的第三部分包括：

• 标题
• mailto链接

看起来是这样的：

第3节HTML

<section class="d-flex flex-column justify-content-center align-items-center vh-100 position-relative" id="contact">
  <h2 class="h1">...</h2>
  <a href="mailto:hello@digitalmonsters.com" class="text-gray h2">...</a> 
</section>

7.响应Swift

我们快完成了！ 最后，让我们确保文本在所有屏幕上都有稳定的外观。 我们将应用针对窄屏的规则：

@media screen and (max-width: 600px) {
  html {
    font-size: 12px;
  }
}

这里的一个重要说明是，在我们的样式中，我们使用rem来设置字体大小。 这种方法非常有用，因为字体大小是相对于根元素（ html ）的。 如果像上面的代码那样减小其字体大小，则与rem相关的字体大小将动态减小。 当然，我们也可以将rem用于其他CSS属性。

我们项目的最终状态：

结论

在本教程中，我们通过学习如何构建吸引人的静态投资组合页面来提高了CSS知识。 我们更进一步，无需使用任何外部JavaScript库，SVG或canvas元素，即可创建响应式条形图。 仅使用普通CSS！

希望本教程能给您足够的启发来构建您的出色组合网站。 我希望看到您的工作，请务必与我们分享！

如果您想进一步增强或扩展此演示，可以做两件事：

一如既往，感谢您的阅读！

翻译自: https://webdesign.tutsplus.com/tutorials/build-a-static-portfolio-with-advanced-css-bar-chart--cms-33050

css实现贝塞尔静态图