本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开。虽然行文偏长，但较基础，适合初级中级前端阅读，阅读的时候请适当跳过已经掌握的部分。 这篇文章断断续续写了比较久，也参考了许多优秀的文章，但或许文章里还是存在不好或不对的地方，请多多指教，可以评论里直接提出来哈。 小t…

SVG sprite其实就是svg的集合。SVG即可缩放矢量图形 (Scalable Vector Graphics)的简称，是一种用来描述二维矢量图形的XML标记语言。SVG图形不依赖于分辨率, 因此图形不会因为放大而显示出明显的锯齿边缘.使用svg格式我们可以直接用代码来描…

css3 pointer-events pointer-events 是什么？ 顾名思义，pointer-events 是一个用于 HTML 指针事件的属性。 pointer-events 可以禁用 HTML 元素的 hover/focus/active 等动态效果。 默认值为 …

你所不知道的 CSS 动画技巧与细节 ·

对于svg，可能一些刚接触前端的同学比较的陌生。你可以先去MDN上看一下基本的介绍。本篇内容最重要的一个知识点就是stroke-dasharray和stroke-offset的组合使用。 这个难度不是很大，本质上就是一个小圆弧在圆环上旋转。 接下来重点来了，我们需要通过tran…

项目的github地址为： https://github.com/sunshine940326/css3formeledemo本文首发于我的个人博客，http://cherryblog.site/ ；欢迎大家查看我的其他博客最近在做公司后台的优化项目，拿到设计稿一看，设计师觉得…

在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没…

前段时间拜读阮老师的 《ECMAScript 6 入门》 ，看到官网上每个章节的页面都有一个类似进度条的东西，出于好奇，上网查了一下，发现这个东西叫Scroll Indicator. Scroll Indicator：滚动指示器。通俗来说，就是当前可视区域距离页面顶部的占比，效…