如何在 css 和 jquery 中使用形状制作动画？

Question

我想让这些形状像图片模型。它也有动画模式。 我有 3 个问题。如果我使用 Triangle 作为corners 的顶部，我需要将 Border-left 作为 Line... 我想使用以下代码：

Opening from center to top and down

have like triangle in top

all are open

#triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
    }

1-如何制作三角形然后只为顶部的线提供边框？

2-如何从中心一起制作动画SlideDown和SlideUp？

对不起，如果我的英语不好。请点击链接打开图片。

Answer 1

嘿，这是一个很好的问题。

有很多不同的方法可以做这样的事情。你可以使用像 GreenSock's MorphSVG 这样的 JS 插件。但我鼓励您花时间学习如何直接使用 CSS 为 HTML 制作动画。有很多不同的前端用例，当您了解正在发生的事情时，您将能够非常轻松地做出这样的事情。

我认为做你想做的最干净的方法是：

1. 在您的容器中添加 3 个额外的 <span> 标签。
2. 将<span> 标签设置为最终位置。
3. 然后通过定位容器的:hover 选择器为<span> 设置动画，并使用transitions 操作<span> 的高度/宽度。

我创建了一个JSFiddle 来展示如何做到这一点，并且我在 SCSS 中添加了一些 cmets 来解释正在发生的事情。

了解 CSS 动画基础知识的另一个重要资源是 FireshipIO 的 this video。