动画

  • 承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货!

    OK,下面直接进入正文。本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,语法如下,还未接触过这个属性的可以先简单到 MDN -- filter 了解下:

    {
        filter: blur(5px);
        filter: brightness(0.4);
        filter: contrast(200%);
        filter: drop-shadow(16px 16px 20px blue);
        filter: grayscale(
  • 正文从下面开始。


    今天的小技巧是使用纯 CSS 生成火焰,逼真一点的火焰。

    嗯,长什么样子?在 CodePen 上输入关键字 CSS Fire,能找到这样的:

    image

    或者这样的:

    css-fire1 gif

    我们希望,仅仅使用 CSS ,效果能再更进一步吗?能不能是这样子:

    css-fire2 gif

    如何实现

    嗯,我们需要使用 filter + mix-blend-mode 的组合来完成。

    很多 CSS 华而不实的效果都是 filter + mix-blend-mode,很有意思,但是业务中根本用不上,当然多了解了解总没坏处。

    如上图,整个蜡烛的骨架, 除去火焰的部分很简单,掠过不讲。主要来看看火焰这一块如何生成,并且如何赋予动画效果。

    S