勋章
我关注的人
粉丝
技术能力
暂时未有相关云产品技术能力~
鹅场切图仔。擅长 CSS 及 Web 动画领域。
-
发表了文章 2016-06-28
【CSS进阶】CSS 颜色体系详解
说到 CSS 颜色，相比大家都不会陌生，本文是我个人对 CSS 颜色体系的一个系统总结与学习，分享给大家。 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容。 接下来的行文内容大概会按照这个顺序进行，内容十分基础，可选择性跳到相应内容处阅读。
-
发表了文章 2016-06-16
【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧
box-shadow 在前端的 CSS 编写工作想必十分常见。但是 box-shadow 除去它的常规用法，其实还存在许多不为人知的奇技淫巧。 喜欢 markdown 版本的可以戳这里 。 box-shadow 常规用法 说到 box-shadow ，首先想到的必然是它能够生成阴影，所以称之为 shaodow ，简单看看它的语法： 基础属性语法 box-shadow 属性向框添加一个或多个阴影。
-
发表了文章 2016-05-25
【CSS进阶】伪元素的妙用--单标签之美
最近在研读 《CSS SECRET》（CSS揭秘）这本大作，对 CSS 有了更深层次的理解，折腾了下面这个项目： CSS3奇思妙想 -- Demo （请用 Chrome 浏览器打开，非常值得一看）。采用单标签完成各种图案，许多图案与本文有关。
-
发表了文章 2016-05-17
【前端性能】高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题，以及拜读《CSS SECRET》（CSS揭秘）这本大作。 本文主要想谈谈页面优化之滚动优化。 主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。
-
发表了文章 2016-04-28
【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
承接上一篇：【CSS3进阶】酷炫的3D旋转透视 。 最近入坑 Web 动画，所以把自己的学习过程记录一下分享给大家。 CSS3 3D 行星运转 demo 页面请戳：Demo。（建议使用Chrome打开） 本文完整的代码，以及更多的 CSS3 效果，在我 Github 上可以看到，也希望大家可以点个 star。
-
发表了文章 2016-04-21
【CSS3进阶】酷炫的3D旋转透视
之前学习 react+webpack ，偶然路过 webpack 官网 ，看到顶部的 LOGO ，就很感兴趣。 最近觉得自己 CSS3 过于薄弱，想着深入学习一番，遂以这个 LOGO 为切入口，好好研究学习了一下相关的 CSS3 属性。
-
发表了文章 2016-04-07
【前端性能】浅谈域名发散与域名收敛
性能优化一直是前端工作中十分重要的一环，都说从 10 到 1 容易，从 1 到 0 很难。而随着前端技术的飞速发展，没有什么技术或者法则是金科玉律一成不变的。 很佩服那些勇于挑战权威，推陈出新的勇者，是他们让我们的技术不断的变革更加的卓越。
-
发表了文章 2016-03-29
【BOOM】一款有趣的Javascript动画效果
实践出真知，有的时候看到一些有趣的现象就想着用自己所学的知识复现一下。 boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目，在 IOS 上实现了这样一个小动画效果，看上去蛮炫的，效果图： 我就寻思着，在浏览器环境下，用 Javascript 怎么实现呢？ 在浓烈的好奇心驱使下，最终利用 Javascript 和 CSS3 完成了模仿上面的效果，通过调用方法，可以将页面上的图片一键爆炸，我给它起了个 boomJS 的名字，贴两张效果图： Demo戳我。
-
发表了文章 2016-02-23
【CSS进阶】原生JS getComputedStyle等方法解析
最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。 其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。
-
发表了文章 2015-12-21
【基础进阶】URL详解与URL编码
作为前端，每日与 URL 打交道是必不可少的。但是也许每天只是单纯的用，对其只是一知半解，随着工作的展开，我发现在日常抓包调试，接口调用，浏览器兼容等许多方面，不深入去理解URL与URL编码则会踩到很多坑。
-
发表了文章 2015-11-10
【nodeJS爬虫】前端爬虫系列 -- 小爬「博客园」
写这篇 blog 其实一开始我是拒绝的，因为爬虫爬的就是cnblog博客园。搞不好编辑看到了就把我的账号给封了：）。 言归正传，前端同学可能向来对爬虫不是很感冒，觉得爬虫需要用偏后端的语言，诸如 php ， python 等。
-
发表了文章 2015-09-24
【优雅代码】深入浅出 妙用Javascript中apply、call、bind
这篇文章实在是很难下笔，因为网上相关文章不胜枚举。 巧合的是前些天看到阮老师的一篇文章的一句话： “对我来说，博客首先是一种知识管理工具，其次才是传播工具。我的技术文章，主要用来整理我还不懂的知识。
-
发表了文章 2015-08-16
清除页面广告？身为前端，自己做一款简易的chrome扩展吧
大家肯定有这样的经历，浏览网页的时候，左右两端广告，诸如“屠龙宝刀，点击就送”，以及最近火的不行的林子聪37传奇霸业什么“霸业面具，霸业吊坠”的魔性广告总是充斥我们的眼球。 当然有现成的扩展程序或者插件（两者概念稍有不同）可以清除页面广告，但是既然身为一名程序猿，尤其是FEDer，为什么不尝试一下自己写一个清除广告的扩展程序呢。
-
发表了文章 2015-05-07
【前端性能】必须要掌握的原生JS实现JQuery
很多时候，我们经常听见有人说jquery有多快多快。在这个各种类库满天飞的时候，不得不说的是，能有原生JS快吗？ 是的，明显原生JS要更快，因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西，考虑通用性必然会导致性能的损耗。
-
发表了文章 2015-04-21
【前端攻略】最全面的水平垂直居中方案与flexbox布局
最近又遇到许多垂直居中的问题，这是Css布局当中十分常见的一个问题，诸如定长定宽或不定长宽的各类容器的垂直居中，其实都有很多种解决方案。而且在Css3的flexbox出现之后，解决各类居中问题变得更加容易了。
-
发表了文章 2015-03-27
【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧
引言 在现在的前端页面中，尤其是移动端，经常会需要将或者是模块悬浮出来，跟随页面的滑动保持定位在页面的最上方或者是最下方，如下图所示。 “回复主题”模块，就是跟随页面的浮动一直悬浮在页面的最下方，代码结构如下。
-
发表了文章 2014-10-16
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
很多面试题是我自己面试BAT亲身经历碰到的。整理分享出来希望更多的前端er共同进步吧，不仅适用于求职者，对于巩固复习js更是大有裨益。 而更多的题目是我一路以来收集的，也有往年的，答案不确保一定正确，如有错误或有更好的解法，还请斧正。
-
发表了文章 2014-10-10
高性能Javascript--高效的数据访问
接上一篇，希望能写一个高性能Javascript专题。 第一篇：高性能Javascript--脚本的无阻塞加载策略。 参考摘录《高性能Javascript》。 经典计算机科学的一个问题是，数据应当存放在什么地方，以实现最佳的读写效率。
-
发表了文章 2014-10-08
高性能Javascript--脚本的无阻塞加载策略
Javascript在浏览器中的性能，可以说是前端开发者所要面对的最重要的可用性问题。 在Yahoo的Yslow23条规则当中，其中一条是将JS放在底部 。原因是，事实上，大多数浏览器使用单进程处理UI和更新Javascript运行等多个任务，而同一时间只能有一个任务被执行。
-
发表了文章 2014-09-16
由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）
写这篇文章的起因是源于这篇文章：谈谈面试与面试题 中关于position的讨论，文中一开始就说的这句话： 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺着一路扯到normal flow、containing block、bfc、marg...
-
发表了文章 2014-09-03
跟着9张思维导图学习Javascript
学习的道路就是要不断的总结归纳，好记性不如烂笔头，so，下面将 po 出我收集的 9 张 javascript 相关的思维导图（非原创）。 思维导图小tips： 思维导图又叫心智图，是表达发射性思维的有效的图形思维工具 ，它简单却又极其有效，是一种革命性的思维工具。
-
发表了文章 2014-08-31
Javascript中关键参数this浅析
自从接触javascript以来，对this参数的理解一直是模棱两可。虽有过深入去理解，但却也总感觉是那种浮于表面，没有完全理清头绪。 但对于this参数，确实会让人产生很多误解。那么this参数到底是何方神圣？ 理解this this是一个与执行上下文（execution context，也就是作用域）相关的特殊对象。
-
发表了文章
2022-05-29
妙啊！动画还可以这样控制？
-
发表了文章
2022-05-29
浅谈逻辑选择器 -- 父选择器它来了！
-
发表了文章
2022-05-29
现代 CSS 解决方案：CSS 数学函数 （下）
-
发表了文章
2022-05-29
现代 CSS 解决方案：CSS 数学函数 （上）
-
发表了文章
2022-05-29
离谱的 CSS！从表盘刻度到艺术剪纸
-
发表了文章
2022-05-29
阴影进阶，实现更加的立体的阴影效果！
-
发表了文章
2022-05-29
让交互更加生动！有意思的鼠标跟随 3D 旋转动效
-
发表了文章
2022-05-29
Amazing！巧用 CSS 视差实现酷炫交互动效
-
发表了文章
2022-05-29
现代 CSS 解决方案：Modern CSS Reset
-
发表了文章
2022-05-29
不借助 Javascript，利用 SVG 快速构建马赛克效果
-
发表了文章
2022-05-29
巧用 background-clip 实现超强的文字动效
-
发表了文章
2022-05-29
一道有意思的 CSS 面试题，FizzBuzz ~
-
发表了文章
2022-05-29
2022 年最受瞩目的新特性 CSS @layer 到底是个啥？
-
发表了文章
2022-05-29
神奇的 CSS，让文字智能适配背景颜色
-
发表了文章
2022-05-29
巧用 CSS 构建渐变彩色二维码
-
发表了文章
2022-05-29
革命性创新，动画杀手锏 @scroll-timeline
-
发表了文章
2022-05-29
巧用 CSS 实现炫彩三角边框动画
-
发表了文章
2022-05-29
突破限制，CSS font-variation 可变字体的魅力
-
发表了文章
2022-05-29
扫盲贴：2021 CSS 最冷门特性都是些啥？
-
发表了文章
2022-05-29
疑难杂症：运用 transform 导致文本模糊的现象探究
