Codepen 上最受欢迎的 5 个动画和设计，其背后隐藏着什么？

AWS 安全上线！

Codepens 100“2020 年最受喜爱”榜单现已发布，一如既往地囊括了精彩纷呈的设计和动画作品，您可以点击此处查看完整榜单。所有作品均由经验丰富的专业人士倾力打造。因此，在这篇文章中，我甄选了其中五佳，并逐一为您揭秘其背后的原理，并阐述这些令人惊叹的作品背后运用了哪些技能。此外，我还将提供一些资源供您查阅和进一步研究。

1 卡片悬停交互

Ryan Mulligan 的
作品荣登榜首，它由三张卡片组成，卡片上布满了风景背景和一些文字内容。鼠标悬停在卡片上时，不同元素会呈现出非常流畅的动画效果，这种技术被称为交错动画。

您可以通过参考 CSS 中第 171 行至第 204 行的代码块来检查 CSS 过渡动画的核心



@media (hover: hover) and (min-width: $bp-md) {
  .card:after {
    transform: translateY(0);
  }

  .content {
    transform: translateY(calc(100% - 4.5rem));

    > *:not(.title) {
      opacity: 0;
      transform: translateY(1rem);
      transition:
        transform var(--d) var(--e),
        opacity var(--d) var(--e);
    }
  }

  .card:hover,
  .card:focus-within {
    align-items: center;

    &:before { transform: translateY(-4%); }
    &:after { transform: translateY(-50%); }

    .content {
      transform: translateY(0);

      > *:not(.title) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(var(--d) / 8);
      }
    }
  }

是的，解释起来有点复杂，因为它是用 SASS 编写的，而且还使用了变量，本质上就是用了交错的 CSS Transitions 动画。你可以在这里了解更多信息：https://css-tricks.com/staggered-css-transitions/

所需技能

pug - 用于生成 HTML
sass - 用于生成 css
CSS - 变换动画、响应式 CSS 网格、css 变量
资源
https://css-tricks.com/staggered-css-transitions/

2架飞机

作者：Steve Gardner
在这个流畅的动画中，滚动条被用来控制飞机的动画。当你滚动时，飞机会以3D方式飞行，而文本内容则以相反的方向滚动。

此动画使用了两个不同的动画库。它使用 three.js 处理飞机模型的 3D 部分，然后使用 greensocks 的 scrollTrigger 和 drawsvg 插件完成大部分动画。如果您想了解它们的工作原理，请在此处阅读更多信息：
scrollTrigger： https: //greensock.com/scrolltrigger/
drawsvg： https: //greensock.com/drawsvg/
three.js： https: //threejs.org/

所需技能

HTML
sass - 用于生成 css
关键 CSS 技术 - 剪切路径、多个背景图像
SVG
Javascript - 使用 three.js 创建 3D 模型，使用 greensocks 动画库，尤其是 scrollTrigger。
资源
GSAP： https: //greensock.com/get-started/
scrollTrigger：https: //greensock.com/scrolltrigger/
drawsvg：https: //greensock.com/drawsvg/
three.js： https: //threejs.org/

3 CSS 网格：报纸布局

作者：Olivia Ng

这是一个巧妙的布局，模拟了老式报纸的布局，并且还具有响应式设计。这是一个很好的例子，展示了如何配置复杂的设计布局以适应所有屏幕尺寸。

这里需要注意的最重要的技巧是如何通过使用 column-count 来定义一些嵌套布局。通常，大多数人使用 CSS 网格作为主网格，并使用弹性框来实现网格内的嵌套布局。但更简洁的解决方案是使用 column-count。从下面的截图中，您可以看到底部突出显示的内容是如何通过 column-count:2 定义的：

主网格区域配置如下图所示，在屏幕截图中标记为 1。第二个样式属性标记为 2，显示了其中一个网格区域的定义方式。

所需技能

Pug - 生成 HTML
SASS - 创建 CSS
CSS 变量
CSS - 深入了解网格 (Grid) 以及列计数 (column-count) 的使用。
资源
https://css-tricks.com/snippets/css/complete-guide-grid/
https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

4 糖果色按钮动画

由 Yuhomyan 创作，
这是一个包含 16 个按钮的集合，每个按钮都应用了独立的 CSS 动画。动画效果丰富多样，包括背景颜色变换、渐变以及 3D 旋转。

以下是按钮 12 的属性，该按钮的两个表面均应用了 3D 旋转。旋转通过“transform: rotateX(-90deg);”设置应用：



.btn-12 span:nth-child(2) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.btn-12:hover span:nth-child(1) {
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.btn-12:hover span:nth-child(2) {
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
 color: transparent;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

所需技能

HTML
CSS - 对 CSS 的理解，特别是过渡和关键帧动画。以及如何应用多重阴影和线性渐变。
资源：
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
https://www.youtube.com/watch?v=cH0TC9gWiAg

5 个不可能复选框 v2

Jhey 制作的
SVG 动画，使用 GSAP 时间轴动画制作。它就像一个角色扮演的小游戏。点击复选框开关时，它会移到另一侧，然后你会看到一只小爪子把它拉回来。持续点击它，一只熊会逐渐显露出来，然后它会变得愤怒。快来试试吧！实际的熊是一组 svg 绘图，由三部分组成，如下所示：

诀窍在于将这些部分隐藏在按钮开关后面，并通过协调分别对它们进行动画处理。这就是 GSAP 的作用所在。您可以使用 GSAP 中的时间轴功能构建不同资源的动画，以便更好地控制动画。动画中还内置了一些规则，以便根据点击开关的次数呈现不同的动画变化。此演示使用 react.js 构建，大部分动画逻辑位于useEffect钩子中，该钩子从第 53 行开始。第 82 行尤为重要，这里声明了时间轴，如下所示：const bearTL = timeline({delay: Math.random(), onComplete })