奇技淫巧

  • 很久之前在张鑫旭大大的博客看到过一篇 PNG格式小图标的CSS任意颜色赋色技术,当时惊为天人,感慨还可以这样玩,私底下也曾多次想过有没有其他方法可以实现,又或者不仅仅局限于 PNG 图片。

    本方法与上面 ZXX 的方法及流传的使用 filter 滤镜 drop-shadow 不同。发现这个方法也是在写另外一篇文章的过程中。

    mix-blend-mode 与 background-blend-mode

    mix-blend-mode 在我之前的一篇文章初略介绍过 -- 不可思议的混合模式 mix-blend-mode,与本文的主角 background-blend-mode 一样,都是实现混合模式

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

    underline

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

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

    定义需求

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

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

  • 问题先行,如何使用 CSS 实现下述滚动条效果?

    scrollbar

    就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短。

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

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

    image

    分析需求

    第一眼看到这个效果,感觉这个跟随滚动动画,仅靠 CSS 是不可能完成的,因为这里涉及了页面滚动距离的计算。

    如果想只用 CSS 实现,只能另辟蹊径,使用一些讨巧

  • 直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样:

    css-mouse-follow gif

    通常而言,CSS 负责表现,JavaScript 负责行为。而鼠标跟随这种效果属于行为,要实现通常都需要借助 JS。

    当然,本文的重点,就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些鼠标跟随的行为动画效果。

    原理

    以上面的 Demo 为例子,要使用 CSS 实现鼠标跟随,最重要的一点就是:

    如何实时监测到当前鼠标处于何处?

    OK,其实很多 CSS 效果,都离不开 障眼法 二字。要监测到当前鼠标处于何处,我们只需要在页面上铺满元素即可:

    我们使用 100 个元素,将整个页面铺满,h

  • 5、单行居中显示文字,多行居左显示,最多两行超过用省略号结尾

    这题就厉害了我的哥。

    题目就是如上要求,使用纯 CSS,完成单行文本居中显示文字,多行居左显示,最多两行超过用省略号结尾,效果如下:

    不愿看长篇大论的可以先看看效果:-webkit- 内核下 Demo 戳我

    多行文字展示

    接下来就一步一步来实现这个效果。

    首先是单行居中,多行居左

    居中需要用到 text-align:center,居左是默认值也就是text-align:left。如合让两者结合起来达到单行居中,多行居左呢?这就需要多一个标签,假设一开始我们定义如下:

    <h2>单行居中,多行居左</h2>

    现在,我们在 h