强大的CSS: 使用“变量种子计数器”扩展动画更多可能性

原创 高志飞 教程 css 57阅读 2019-05-23 13:43:12 举报

一、不是所有CSS属性都能动画

经常和CSS打交道的人肯定都知道,不是所有的CSS属性都能使用animation属性实现动画效果,最典型的例子就是background-image渐变。

一个典型的线性渐变是由角度,颜色和位置组成,例如:

其中无论是角度(45deg),颜色(redblue)还是位置(50%)单独作为属性者都是可以动画过渡的,但是合在一起作为渐变背景的时候是无法产生过渡效果的,因为background-image的语义是图片。

那有没有什么办法可以让背景图片也能实现动画过渡呢,至少CSS渐变可以实现?[图片上传失败...(image-e6ee4e-1558437352811)]

经过我的研究和探索,找到了一种解决方案,虽称不上百分百完美,但足够应用于项目中,能让以前很多不支持CSS动画的属性,也支持原生的动画效果。

二、变量种子计数器

Chrome等浏览器(不包括Safari)有个特性,就是当我们使用@keyframes定义关键帧的时候,关键帧里面设置的属性也是会运行的(几年前改变的,原先不是),典型的案例就是content属性与内容变化。

例如实现一个“正在加载中…”打点效果可以下面CSS和HTML:

实时效果如下:

正在加载中


根据我的测试发现,不仅普通的CSS属性可以在CSS动画关键帧中运行,CSS自定义属性(CSS变量)也可以在CSS动画关键帧中运行。例如:

这种特性就非常有启发,如果我们某一个CSS属性值是基于这个--someVar变量构成的,那岂不是就算这个属性值不支持CSS动画,我只要让每一个百分比值的间隙足够的小,不也能够实现一个平滑的动画效果?

具体做法就是,把CSS动画关键帧从0%-100%分成101份,然后每一份从0开始依次计数,就像是个计数器一样,然后把这个计数器分配给一个特定的CSS变量。最终我们可以得到一个如下所示的CSS动画“变量种子计数器”。

上面这段@keyframes seed{}相关CSS代码就是一个可以无限使用的“动画种子”,无论是那些原本支持CSS动画的属性,还是不支持CSS动画的属性,只要它的属性值是与数值相关的,都能够借助这个“动画种子”实现动画效果。

举个渐变旋转的例子

例如一开始那个线性渐变的例子,我们可以让渐变旋转角度和我们“动画种子”中的--seed变量相关联,配合animation属性就能实现渐变旋转的效果了:

三、更进一步的动画效果

配合“变量种子计数器”,我们最实现过去很难实现的密集型背景图形动画效果,例如下面这张平铺的圈圈放大效果:

CSS和HTML代码如下:

只要把我们的径向渐变的边缘使用var(--seed)种子变量表示就可以了。使用2%计算而不是使用1%是为了红色铺满之后有一定的延时,否则效果体验的时候眼睛会闪瞎。

四、兼容性及结语

“变量种子计数器”实现动画技术的兼容性如下:

  • Chrome浏览器和Android设备上完全无障碍使用的;
  • Firefox浏览器也是支持动画帧里面设置CSS变量的,但是需要应用动画的属性也写在其中,也就是每一帧中都要把background-image也写上,但这样就完全没有重用性,成本较高,所以价值有限;
  • IE浏览器和Safari浏览器则完全不支持;

由于Safari不支持,导致iOS手机上是没有效果的,大大制约了实用价值。

但是放在特殊场合,也不是不能使用,我们可以使用增强实现某些特殊的效果,例如这篇文章介绍的新颖的交互动效

自己是一个五年的前端工程师,希望本文对你有帮助!

这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术

点击:加入

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复