伪元素动画和转换的例子

一些创造性的实验使用伪元素上的动画和转换来创建有趣的效果。

今天，我们将尝试动画和伪元素（：之前和之后）的转换，我们将发现它们的潜力。我们将讨论一下关于动画伪元素的一些问题，并看看四个使用一些特殊技术来实现各种效果的例子。

我们首先来看看使用动画和转换以及伪元素的优点和缺点。

优点

简化和优化HTML标记

利用CSS3的能力

有助于设计

缺点

只支持Firefox，IE10和最近的Chrome浏览器（请参阅此更新的支持表了解更多信息）

在移动浏览器中不起作用

伪元素不能由ID标识

伪元素不出现在DOM中。

伪元素不能用JavaScript来动画

显而易见，缺点比优势更多，但我认为我们应该对未来感到兴奋，并试试！

以下四个例子是为这个特定主题创建的。很明显，还有其他方法可以达到相同的视觉效果，但是为了这个实验，我们当然会使用伪元素，所以要注意，它只能在支持动画和转换的浏览器中使用。

请注意：

在本教程中，我们将省略供应商前缀，但您可以在下载文件中找到它们。

对于这两个例子，我们将主要使用box-shadow属性和EM单位。

一个非常有趣的事实：伪元素从父类继承属性。在动画的情况下，所有的转换直接影响到它们。如果我们想最大限度地提供支持，这可以派上用场。看看现在 Roman Komarov为伪元素使用CSS转换了解更多。

开始吧！

例1

首先，我们要做一件有趣的事情：一滴水落入一个圆形容器的动画（基于Codrops标志）

我们只有一个元素，虽然它可能有另一个容器来帮助改变规模。

以下是获取更多自然动画的两个提示：

观看和分析图片，视频等参考

尝试使用不同的速度来转换CSS属性和关键帧。

更多关于动画角色的信息，绝对有趣且值得探索的是理查德·威廉斯（Richard Williams）的“动画师的生存工具包”（The Animator's Survival Kit）。

让我们回到我们的主题。在这最后一个例子中：在伪类之前像父亲一样具有相同的宽度。为了不会有意外的溢出问题，我们将使用“继承”值。

例2

在这个例子中，我们将通过使用转换创建一个悬停效果。

这里我们只有一个容器和一个标题来区分文本。

您必须一次只使用一种颜色，以避免在触发悬停时通过重叠来避免不必要的颜色混合。

例3

我们怎么敢敢忽略那些不可或缺的微调加载动画呢！

这里的想法是通过旋转合并颜色。这很简单！

我们将只使用一个元素来标记。

这是一个很好的例子，试验时间和速度，以获得一个非常流畅的动画。

例4

这是最疯狂和最奢侈的例子：一个小小的独眼飞行的生物！

我们将使用动画和转换。

我们将使用一个元素的生物的眼睛。

在悬停我们激活翅膀动画和身体明星提升。

这是最后一个例子！

总之，伪元素是一件好事，将它们与动画和转换相结合，可以创建一些有趣的效果，而不需要使用太多的标记或图像。更广泛的浏览器支持有望很快推出; 在那之前我们可以玩它，发现有趣和有趣的技术。

你怎么看待这件事？

我希望这会对你有用，并起到启发作用。