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

Posted 2023-03-06

【中文标题】如何在 css 和 jquery 中使用形状制作动画？

【英文标题】：how to make animate with shapes in css and jquery?

【发布时间】：2022-01-07 03:56:32

【问题描述】：

我想让这些形状像图片模型。它也有动画模式。 我有 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？

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

【参考方案1】：

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

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

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

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

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

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

【讨论】：

How do I write a good answer?: “我们鼓励链接到外部资源，但请在链接周围添加上下文，以便您的其他用户知道它是什么以及它为什么存在。总是引用重要链接中最相关的部分，以防外部资源无法访问或永久脱机。” - 在这种情况下，这将是实现 OP 要求的实际代码。跨度>