动效

  • 怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画。

    废话少说,直接进入正题,本文提到的动画不加特殊说明,皆指 CSS 动画。

    正负旋转相消

    嗯。名字起的很奇怪,好像数学概念一样。image

    在动画中,旋转是非常常用的属性,

    {
      transform: rotate(90deg);
    }

    那旋转有一些什么高级点的技巧呢?当然是可以改变 transfrom-origin ,改变旋转中心点啦。

    image

    开个玩笑,改变旋转中心点这个估计大家都知道了,这里要介绍的技巧是利用父级元素正反两个方向的旋转,来制

  • 本文接前文:不可思议的混合模式 mix-blend-mode 。由于 mix-blend-mode 这个属性的强大,很多应用场景和动效的制作不断完善和被发掘出来,遂另起一文继续介绍一些使用 mix-blend-mode 制作的酷炫动画。

    CSS3 新增了一个很有意思的属性 -- mix-blend-mode ,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式,当然,我们我们通常称之为混合模式

    混合模式最常见于 photoshop 中,是 PS 中十分强大的功能之一。当然,瞎用乱用混合模式谁都会,利用混合模式将多个图层混合得到一个新的效果,只是要用到

  • 先上张图,如何使用纯 CSS 制作如下效果?

    underline

    在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。

    OK,继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦啊。所以我一直在想,有没有可能只使用 CSS 完成这个效果呢?

    定义需求

    我们定义一下简单的规则,要求如下:

    • 假设 HTML 结构如下:
    <ul>
      <li>不可思议的CSS</li>
      <li>导航栏</li>
      <li

  • 动画相关概念

    • 帧:动画过程中每一个静止的状态,每一张静止的图片
    • 帧率:刷新频率,每秒钟播放的帧数,FPS(frame per second),单位是Hz
    • 帧时长:每一帧停留的时间,如60FPS的动画帧时长约为16.7ms,意味着浏览器必须在16.7ms内绘制完这一帧
    • 硬件加速:硬件有三个处理器:CPU、GPU和APU(声音处理器)。他们通过PCI/AGP/PCIE总线交换数据。GPU在浮点运算、并行计算等部分计算方面,明显高于CPU的性能。硬件加速即利用GPU进行动画的计算
    • 缓动:最普通的动画就是匀速的动画,每次增加固定的值。缓动就是用来修改每次增加的值,让其按照不规律的方式增加,实现动画的
  • 为了之后产品可能的动画需求,我们需要调研各种可行的前端动画技术。相信CSS3动画和JS动画我们平常已经接触很多了,而SVG技术则很少用,事实上SVG也是一种强大的动画解决方案,可以帮我们解决传统动画做不到的技术痛点。

    SVG简介

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