动效

  • 此系列其他相关文章 #35

    1、 svg知识扫盲

    svg简介

    • SVG(Scalable Vector Graphics),可缩放矢量图形,具有放大缩小不失真的特性,可以用来创建矢量图。
    • SVG1.1 于 2003 年 1 月 14 日成为 W3C 推荐标准。
    • SVG本质上是用XML语言描述的,所以它可以和DOM结构一样被CSS和JS编程控制,通过连续地改变SVG图形属性就可以创建SVG动画。
    • SVG可用文本编辑器编辑,也可通过Adobe Illustator等专业编辑软件处理。

    SVG文件可单独使用,使用XML定义并包含DTD声明:

    <?xml version="1.0" stand
  • 何为滚动视差

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势,越来越多的网站应用了这项技术。

    parallax

    通常而言,滚动视差在前端需要辅助 Javascript 才能实现。当然,其实 CSS 在实现滚动视差效果方面,也有着不俗的能力。下面就让我们来见识一二:

    认识 background-attachment

    background-attachment 算是一个比较生僻的属性,基本上平时写业务样式都用不到这个属性。但是它本身很有意思。

    background-attachment:如果指定了 backgro

  • 正文从下面开始。


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

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

    image

    或者这样的:

    css-fire1 gif

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

    css-fire2 gif

    如何实现

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

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

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

    S