动效

  • 有的时候,嗯,应该说某些特定场合,我们可能需要下面这样的动画效果,渐变 + 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 

  • 说起 background-clip ,可能很多人都很陌生。Clip 的意思为修剪,那么从字面意思上理解,background-clip 的意思即是背景裁剪。

    我曾经在 从条纹边框的实现谈盒子模型 一文中谈到了这个属性,感兴趣的可以回头看看。

    简单而言,background-clip 的作用就是设置元素的背景(背景图片或颜色)的填充规则

    box-sizing 的取值非常类似,通常而言,它有 3 个取值:

    {
        background-clip: border-box;  // 背景延伸到边框外沿(但是在边框之下)
        background-clip: padding-box; /
  • 开始使用 conic-gradient 角向渐变

    感谢 LeaVerou 大神,让我们可以提前使用上这么美妙的属性。

    conic-gradient 是个什么?说到 conic-gradient ,就不得不提的它的另外两个兄弟:

    • linear-gradient : 线性渐变
      lg
    • radial-gradient : 径向渐变
      rg

    说这两个应该还是有很多人了解并且使用过的。CSS3 新增的线性渐变及径向渐变给 CSS 世界带来了很大的变化。

    conic-gradient ,表示角向渐变,另外一种渐变方式,给 CSS 世界带来了更多可能。

    下面进入正文,本文中所有示例,请在高版本 Chrome 内


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

    混合模式最常见于 photoshop 中,是 PS 中十分强大的功能之一。当然,瞎用乱用混合模式谁都会,利用混合模式将多个图层混合得到一个新的效果,只是要用到恰到好处,或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。

    我个人对混合模式的理解也十分浅显,本文只是带领大家走进 CSS 混合模式的世界,初浅的了解混合模式及尝试使用它制作一些效果。

    mix-ble

  • 1/3