Aaron Qiu qzm

## requestAnimationFrame.js
// requestAnimationFrame
window.requestAnimationFrame =
window.requestAnimationFrame       ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame    ||
window.oRequestAnimationFrame      ||
window.msRequestAnimationFrame     ||
function(callback) {
    setTimeout(callback, 1000 / 60);
};

## popup.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .popup {

## gpu.css
.calssName {
    transform: translateZ(0);
}

.className {
    transform: translate3d(0, 0, 0);
}

## rotate.css
.box {
    width: 100px;
    height: 100px;
    border: 1px #111 solid;
    position: relative;
    transition: background-color 1s ease;
    transition: width 1s ease;
    animation-name: mymove;
    animation-duration: 3s;
    animation-timing-function: linear;

## triangl.css
.triangl {
    /* 设置div的高度和宽度为 0 ，使得整个box只有border的部分 */
    height: 0;
    width: 0;
    /* 设置border为需要的宽度，并隐藏其他三边，这样三角形就出来了 */
    border-width: 15px;
    border-style: solid;
    border-color: transparent transparent #CCC transparent;
}

## bootstrap3-media-query.css
/* Desktop */
@media (min-width: 1601px) { }

/* Laptop */
@media (min-width: 1200px) { }

/* Tablet Horizontal */
@media (min-width: 992px) and (max-width: 1199px) { }

/* Tablet Vertical */

## auto-square.css
/* 方法一：1个vw 单位，代表1%视窗单位，相对的还有 hv ，代表一个视窗高度 */
.square {
  width : 25%;
  height : 25vw;
}

/* 方法二：height 为0，使用padding撑开高度，padding的百分比根据所在block的宽度来计算的 */
.square {
  width : 25%;
  height : 0;

## horizontally.css
/* 方法一：使用table-cell 垂直居中*/
.fatherNode {
  display : table-cell;
}
.childNode {
  vertical-align : middle;
}

/* 方法二：设置top为50%，top的定位为负数的1/2高度 */
.className {

## 3.js
replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g,'$1,');

## clearfix.css
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}
.clearfix {
	// requestAnimationFrame
	window.requestAnimationFrame =
	window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	function(callback) {
	setTimeout(callback, 1000 / 60);
	};
	.calssName {
	transform: translateZ(0);
	}

	.className {
	transform: translate3d(0, 0, 0);
	}
	.box {
	width: 100px;
	height: 100px;
	border: 1px #111 solid;
	position: relative;
	transition: background-color 1s ease;
	transition: width 1s ease;
	animation-name: mymove;
	animation-duration: 3s;
	animation-timing-function: linear;
	.triangl {
	/* 设置div的高度和宽度为 0 ，使得整个box只有border的部分 */
	height: 0;
	width: 0;
	/* 设置border为需要的宽度，并隐藏其他三边，这样三角形就出来了 */
	border-width: 15px;
	border-style: solid;
	border-color: transparent transparent #CCC transparent;
	}
	/* Desktop */
	@media (min-width: 1601px) { }

	/* Laptop */
	@media (min-width: 1200px) { }

	/* Tablet Horizontal */
	@media (min-width: 992px) and (max-width: 1199px) { }

	/* Tablet Vertical */
	/* 方法一：1个vw 单位，代表1%视窗单位，相对的还有 hv ，代表一个视窗高度 */
	.square {
	width : 25%;
	height : 25vw;
	}

	/* 方法二：height 为0，使用padding撑开高度，padding的百分比根据所在block的宽度来计算的 */
	.square {
	width : 25%;
	height : 0;
	/* 方法一：使用table-cell 垂直居中*/
	.fatherNode {
	display : table-cell;
	}
	.childNode {
	vertical-align : middle;
	}

	/* 方法二：设置top为50%，top的定位为负数的1/2高度 */
	.className {
	.clearfix:before,
	.clearfix:after {
	content: " ";
	display: table;
	}

	.clearfix:after {
	clear: both;
	}
	.clearfix {