Coco ’s blog


少年不知愁滋味 为赋新词强说愁


  1. 【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧

    box-shadow 在前端的 CSS 编写工作想必十分常见。但是 box-shadow 除去它的常规用法,其实还存在许多不为人知的奇技淫巧。


  2. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 《CSS SECRET》(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目:

    CSS3奇思妙想 – Demo (请用 Chrome 浏览器打开,非常值得一看)。采用单标签完成各种图案,许多图案与本文有关。

    也希望觉得不错的同学顺手在我的 Github 点个 star : CSS3奇思妙想

    正文从这里开始,本文主要讲述一下 伪元素 before 和 after 各种妙用。


  3. 【前端性能】高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读 《CSS SECRET》(CSS揭秘)这本大作。

    本文主要想谈谈页面优化之滚动优化。

    主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动。因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读。


  4. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇: 【CSS3进阶】酷炫的3D旋转透视

    最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家。

    CSS3 3D 行星运转 demo 页面请戳: Demo。(建议使用Chrome打开)


  5. 【CSS3 3D 动画】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣。

    最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研究学习了一下相关的 CSS3 属性。webpack 的 LOGO 动画效果乍看不是很难,深入了解之后,觉得内部其实大有学问,自己折腾了一番,做了一系列相关的 CSS3 动画效果。