一些创造性的实验使用伪元素上的动画和转换来创建有趣的效果。
今天,我们将尝试动画和伪元素(:之前和之后)的转换,我们将发现它们的潜力。我们将讨论一下关于动画伪元素的一些问题,并看看四个使用一些特殊技术来实现各种效果的例子。
我们首先来看看使用动画和转换以及伪元素的优点和缺点。
优点
简化和优化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
这是最疯狂和最奢侈的例子:一个小小的独眼飞行的生物!
我们将使用动画和转换。
我们将使用一个元素的生物的眼睛。
在悬停我们激活翅膀动画和身体明星提升。
这是最后一个例子!
总之,伪元素是一件好事,将它们与动画和转换相结合,可以创建一些有趣的效果,而不需要使用太多的标记或图像。更广泛的浏览器支持有望很快推出; 在那之前我们可以玩它,发现有趣和有趣的技术。
你怎么看待这件事?
我希望这会对你有用,并起到启发作用。
本文来自企鹅号 - 深渡媒体
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文来自企鹅号 - 深渡媒体
如有侵权,请联系 cloudcommunity@tencent.com 删除。