奇技淫巧

  • 有的时候,嗯,应该说某些特定场合,我们可能需要下面这样的动画效果,渐变 + animation :

    lineargradient

    假设我们渐变的写法如下:

    div {
        background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%);
    }

    按照常规想法,配合 animation ,我们首先会想到在 animation 的步骤中通过改变颜色实现颜色渐变动画,那么我们的 CSS 代码可能是:

    div {
        background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%);
        animatio

  • 一直以来,使用纯 CSS 实现波浪效果都是十分困难的。

    因为实现波浪的曲线需要借助贝塞尔曲线。

    bezier

    而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法。

    fxxk

    当然,借助其他力量(SVG、CANVAS),是可以很轻松的完成所谓的波浪效果的,先看看,非 CSS 方式实现的波浪效果。

    使用 SVG 实现波浪效果

    借助 SVG ,是很容易画出三次贝塞尔曲线的。

    看看效果:

    wave

    代码如下:

    <svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <text 

  • 承接上一篇你所不知道的 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 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 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 中十分强大的功能之一。当然,瞎用乱用混合模式谁都会,利用混合模式将多个图层混合得到一个新的效果,只是要用到