HaoJu Zheng hjzheng

CSS3 动画

animation: name duration timing-function delay iteration-count direction

animation-delay	Specifies a delay for the start of an animation（设置延时）
animation-direction	Specifies whether an animation should play in reverse direction or alternate cycles
animation-duration	Specifies how many seconds or milliseconds an animation takes to complete one cycle
animation-iteration-count	Specifies the number of times an animation should be played
animation-name	Specifies the name of the @keyframes animation

Transition

transition 	简写属性，用于在一个属性中设置四个过渡属性。  
transition: property duration timing-function delay;
transition-property 	规定应用过渡的 CSS 属性的名称。 默认是all
transition-duration 	定义过渡效果花费的时间。默认是 0。 	
transition-timing-function 	规定过渡效果的时间曲线。默认是 "ease"。

linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。

border-radius

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：

1、border-radius: [ {1,4} ]; //这里只有一个值，那么top-left、top-right、bottom-right、bottom-left四个值相等

2、border-radius:[ {1,4} ] [ {1,4} ] ; //这里设置两个值，那么top-left等于bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二个值 3、border-radius:[ {1,4} ] [ {1,4} ] [ {1,4} ];//如果有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right

CSS3

Flexible box 布局

首先关于 flexible 的布局规范，一直在变，不过目前已经稳定，非常的灵活和强大的布局方式。 bootstrap 4 已经支持 flexible 布局

语法:

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

CSS Base Knowledge

CSS3分栏布局

column-width 栏目宽度

定义了宽度，元素会随着页面宽度，增加列数

column-count 栏目列数

CSS Base Knowledge

display

关于元素display属性，我们可以通过修改display属性，去改变元素在页面的表现行为

页面元素一般情况下分为 block 和 inline

block元素的特点

函数(剩余内容)

高阶函数是指操作函数的函数，它接收一个或多个函数作为参数，并返回一个新函数

//返回一个新的可以计算f(g())的函数
function compose(f,g){
  return function(){
    //需要给f()传入一个参数，所以用call
    //需要给g()传入很多参数，所以用apply
    return f.call(this, g.apply(this, arguments));

	var gulp = require('gulp');
	var source = require('vinyl-source-stream'); // Used to stream bundle for further handling
	var browserify = require('browserify');
	var watchify = require('watchify');
	var gulpif = require('gulp-if');
	var uglify = require('gulp-uglify');
	var streamify = require('gulp-streamify');
	var notify = require('gulp-notify');
	var concat = require('gulp-concat');
	var cssmin = require('gulp-cssmin');

	var OB = function(){
	this.subscribers = [];
	}
	OB.prototype = {
	constructor: OB,
	//订阅方法，返回订阅event标识符
	sub:function(evt, fn){
	this.subscribers[evt] ? this.subscribers[evt].push(fn) :
	(this.subscribers[evt] = []) && this.subscribers[evt].push(fn);
	return '{"evt":"' + evt +'","fn":"' + (this.subscribers[evt].length - 1) + '"}';

	var Loader = (function () {
	function Loader(options) {
	this.options = options;
	if (resource.scripts && resource.baseUrl) {
	for (var i = 0; i < this.options.scripts.length; i++) {
	this.load('js', this.options.scripts[i]);
	}
	for (var i = 0; i < this.options.stylesheets.length; i++) {
	this.load('css', this.options.stylesheets[i]);
	}