本期分享一下如何仅用CSS3，实现单标签的动态晴阴雨雪。技术关键点就是“单标签”和“纯CSS”。先看下最终效果： 没错，就是这么任性，每个动图就一个标签，而且无图无JS！下面就来详细介绍下技术实现。 以及实现单标签最关键的:before、:after伪元素运用。 最大的一点就是…

在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。 同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+…

最近项目需求总是有HTML页面生成图片功能，所以就想记录一下自己在过程中遇到的问题，并加深印象，日后如果忘了也可以回顾。我们项目使用的是html2canvas插件，还有其他插件，例如dom-to-image、rasterizehtml，可以根据需求使用。 由于像素比（DPR =…

我们可以使用纯CSS显示页面滚动百分比进度，传统实现是在body标签上做文章，但有致命缺陷，后来我借助混合模式实现了一种新方法，此方法可以规避传统实现的不足，使纯CSS滚动指示器效果在实际项目中应用成为了可能。

一个跨浏览器的动效基础库，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效，一应俱全。 文件大小：55.2 kB. 和其他的同类工具不同的地方在于，它不仅仅是一个库，而是有这用户可以直接操作的实际功能，它带有一个完整的网页构建器。Bounce.js 是为数不多的可以直…

本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。 鉴于时不时有童鞋翻我以前的沸点，因此，本系列收集了个人目前发过的所有CSS知识点动图，以便阅读。 两个月前，曾发过一篇《你未必知道的49个CSS知识点》，已有3000多赞，这里，老姚真心谢谢大家的支持。 …

1. 匹配ing结尾单词 2. 匹配11位数的中国手机号： [-\w.+] 区间，表示 匹配符号 -，或字母、数字、下划线，或符号 . ，或符号 + * 表示出现，匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo" 1. 匹配9位数的QQ邮箱： 2. …

css盒子模型 又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如下图： 图中的内层是content依次是padding border margin。通常我们设置背景时就是内容…

在前端开发中不论CSS3也好，SVG也好，还是Canvas，无论多复杂的图形，都是由一个个点组成的。一个元素渲染后就可以得到一张位图，然后对这个位图上每一点进行变换，就可以得到新的一张位图，从而产生了视觉上的平移translate、旋转rotate、缩放scale、拉伸skew…