动画

  • 承接上一篇你所不知道的 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

  • 循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果。

    画个电池

    当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个:

    image

    欧了,勉强就是它了。有了电池,那接下来直接充电吧。最最简单的动画,那应该是用色彩把整个电池灌满即可。

    方法很多,代码也很简单,直接看效果:

    charging1

    有内味了,如果要求不高,这个勉强也就能够交差了。通过蓝色渐变表示电量,通过色块的位移动画实现充电的动画。但是总感觉少了点什么。

    增加阴影及颜色的变化

    如果要继续优化的话,需要添加点细节。

    我们知道,低电量时,电量通常表示为红色,高电量时表示为绿色。再给整个色块添加点阴影的变化,呼吸的感觉,让充电的效果看起来确

  • 本文的主题是 Glitch Art,故障艺术。

    什么是故障艺术?我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式。它有一种魔幻的感觉,看起来具有闪烁、震动的效果,很吸引人眼球。

    故障艺术它模拟了画面信号出现故障导致成像错误的感觉。青色色块与红色色块无法重合就是这种故障的体现。从胶片时代开始到今天的数码时代,这种故障一直是观众非常熟悉的现象。即使抖音的 LOGO 只是静态的,大脑也会自己补完整个效果,甚至还会自己脑补信号干扰的噪音。

    当然,广义的故障艺术不仅仅指这种效果,我觉得是很宽泛的,本文将介绍一些 CSS 能够模拟完成的故障艺术效果。

    使用混合模式实现抖音 LOGO

    首先从静态的