伪元素动画和转换的例子

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

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

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

优点

简化和优化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

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

我们将使用动画和转换。

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

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

这是最后一个例子!

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

你怎么看待这件事?

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

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20171225A0DST400?refer=cp_1026

同媒体快讯

相关快讯

扫码关注云+社区