伪元素动画和转换的例子

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

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

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

优点

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

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

我们将使用动画和转换。

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

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

这是最后一个例子!

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

你怎么看待这件事?

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

本文来自企鹅号 - 深渡媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

Xcelsius(水晶易表)系列10——选择器高级用法(钻取与动态可见性)

今天要跟大家分享的专题是水晶易表选择器的高级用法——向下钻取与动态可见性。 本案例紧接系列6——熟练统计图中的钻取功能一篇,不同的是这里通过开启标签菜单的动态可...

29270
来自专栏MixLab科技+设计实验室

用代码生成Glitch Art风格的抖音字体

最近看到不少文章教大家用 photoshop 实现抖音的 logo 跟字体,我也非常喜欢这种风格的字体,于是趁着晚上的时间,动手用代码实现了下此类风格的字体特效...

54780
来自专栏MixLab科技+设计实验室

从Storyboard到DIY实现一个漫画生成器-01

用户只需拍摄一段视频并将其加载到 Storyboard 中即可将视频转换为单页漫画的布局。该应用会自动选择有趣的帧,并将其应用于6种视觉样式中的一种。生成的漫画...

15040
来自专栏Material Design组件

Human Interface Guidelines — Sliders

10120
来自专栏数据小魔方

think-cell char 4——瀑布图案例应用

今天要分享的是瀑布图的两个案例应用。 因为瀑布图的用法比较特殊,在数据组织方面需要很强的技巧,所以这里再用两个案例来讲解瀑布图的用法。 ? ? 首先来看第一个案...

77370
来自专栏菜鸟前端工程师

html+css学习笔记018-H5弹性盒模型

16120
来自专栏我和未来有约会

Silverlight 4 中摄像头的运用—part1

入的视频 摄像头经过一个Video对象就能让你看到视频,而这个对象是一个显示对象,所以显示对象能做得事情,它都能做,比如滤镜,变形,混合模式等等。当然最强大的还...

216100
来自专栏hightopo

原 透过WebGL 3D看动画Easing

10510
来自专栏编程之旅

Rem布局的原理探究

在用前端给移动端页面写布局时,我接触到了Rem布局,但是老实说我也看了几篇手淘适配的文章,并且主要的目的是拿到代码写出demo,所以对于Rem我还是停留在只会使...

45220
来自专栏BestSDK

最实用的6个设计排版准则

作为一个设计师的最重要技能之一就是你要学习如何去选择排版。这是因为文本是设计师与用户沟通的主要方式之一。排版能成就你的设计,也能毁灭你的设计。 一个美观又复杂的...

32140

扫码关注云+社区

领取腾讯云代金券