常用CSS3特效收藏

一、鼠标放置图像旋转360度

#nav a i{
	-webkit-transition: -webkit-transform 0.4s ease-out;
	-moz-transition: -moz-transform 0.4s ease-out;
	transition: transform 0.4s ease-out;
}
#nav a:hover i{
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	transform: rotate(360deg);
}

来源:http://vc.changyou.com/ideas-web.shtml#/ideas/1

二、从上面掉下来

.tm_view_eighth .tm_mask {
-webkit-transition:all .3s ease-out .5s;
-moz-transition:all .3s ease-out .5s;
-o-transition:all .3s ease-out .5s;
-ms-transition:all .3s ease-out .5s;
transition:all .3s ease-out .5s
}
.tm_view_eighth h2 {
	-webkit-transform:translateY(-200px);
	-moz-transform:translateY(-200px);
	-o-transform:translateY(-200px);
	-ms-transform:translateY(-200px);
	transform:translateY(-200px);
-webkit-transition:all .2s ease-in-out .1s;
-moz-transition:all .2s ease-in-out .1s;
-o-transition:all .2s ease-in-out .1s;
-ms-transition:all .2s ease-in-out .1s;
transition:all .2s ease-in-out .1s
}
.tm_view_eighth p {
	color:#333;
	-webkit-transform:translateY(-200px);
	-moz-transform:translateY(-200px);
	-o-transform:translateY(-200px);
	-ms-transform:translateY(-200px);
	transform:translateY(-200px);
-webkit-transition:all .2s ease-in-out .2s;
-moz-transition:all .2s ease-in-out .2s;
-o-transition:all .2s ease-in-out .2s;
-ms-transition:all .2s ease-in-out .2s;
transition:all .2s ease-in-out .2s
}
.tm_view_eighth a.btn {
	-webkit-transform:translateY(-200px);
	-moz-transform:translateY(-200px);
	-o-transform:translateY(-200px);
	-ms-transform:translateY(-200px);
	transform:translateY(-200px);
-webkit-transition:all .2s ease-in-out .3s;
-moz-transition:all .2s ease-in-out .3s;
-o-transition:all .2s ease-in-out .3s;
-ms-transition:all .2s ease-in-out .3s;
transition:all .2s ease-in-out .3s
}


.tm_view_eighth:hover a.btn {
	-webkit-transform:translateY(0px);
	-moz-transform:translateY(0px);
	-o-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
	-webkit-transition-delay:0s;
	-moz-transition-delay:0s;
	-o-transition-delay:0s;
	-ms-transition-delay:0s;
	transition-delay:0s
}

.tm_view_eighth:hover .tm_mask {
	-webkit-transition-delay:0s;
	-moz-transition-delay:0s;
	-o-transition-delay:0s;
	-ms-transition-delay:0s;
	transition-delay:0s;
-webkit-animation:bounceY .9s linear;
-moz-animation:bounceY .9s linear;
-ms-animation:bounceY .9s linear;
animation:bounceY .9s linear
}
.tm_view_eighth:hover h2 {
	-webkit-transform:translateY(0px);
	-moz-transform:translateY(0px);
	-o-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
-webkit-transition-delay:.4s;
-moz-transition-delay:.4s;
-o-transition-delay:.4s;
-ms-transition-delay:.4s;
transition-delay:.4s
}
.tm_view_eighth:hover p {
	-webkit-transform:translateY(0px);
	-moz-transform:translateY(0px);
	-o-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
-webkit-transition-delay:.2s;
-moz-transition-delay:.2s;
-o-transition-delay:.2s;
-ms-transition-delay:.2s;
transition-delay:.2s
}
.tm_view_eighth:hover a.btn {
	-webkit-transform:translateY(0px);
	-moz-transform:translateY(0px);
	-o-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
	-webkit-transition-delay:0s;
	-moz-transition-delay:0s;
	-o-transition-delay:0s;
	-ms-transition-delay:0s;
	transition-delay:0s
}

来源:http://www.7755.me/index.html

三、短小精悍的css3动画库

http://animator.ringotc.net/

四、未完待续

常用原生js函数封装

//封装ID
function $(id) {
	return typeof id === 'string' ? document.getElementById(id) : id;
}
//封装addClass,removeClass,toggleClass
function hasClass(obj, cls) {
	return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(obj, cls) {
	if (!this.hasClass(obj, cls)) obj.className += ' ' + cls;
}

function removeClass(obj, cls) {
	if (hasClass(obj, cls)) {
		var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
		obj.className = obj.className.replace(reg, ' ');
	}
}

function toggleClass(obj, cls) {
	if (hasClass(obj, cls)) {
		removeClass(obj, cls);
	} else {
		addClass(obj, cls);
	}
}
//封装tab切换
function tab(tit, con) {
	var titles = $(tit).getElementsByTagName('li'),
		contents = $(con).getElementsByTagName('li');
	for (var i = 0; i < titles.length; i++) {
		titles[i].id = i;
		titles[i].onmousedown = function() {
			for (var j = 0; j < titles.length; j++) {
				titles[j].className = '';
				contents[j].style.display = 'none';
			};
			this.className = 'on';
			contents[this.id].style.display = 'block';
		}
	}
}
//封装焦点轮播
function focus(wrap, pic, list, prev, next, isAuto) {
	var pic = $(pic),

		prev = $(prev),
		next = $(next),
		index = 0,
		timer = null,
		len = pic.getElementsByTagName('li').length,
		height = pic.getElementsByTagName('li')[0].offsetHeight;
	if (isAuto) {
		auto();
		if (wrap) {
			var wrap = $(wrap);
			wrap.onmouseover = clear;
			wrap.onmouseout = auto;
		}
		if (prev && next) {
			prev.onmouseover = clear;
			next.onmouseover = clear;
			prev.onmouseout = auto;
			next.onmouseout = auto;
		}
	}
	if (prev && next) {
		next.onclick = function() {
			index++;
			if (index >= len) {
				index = 0;
			}
			change(index);
		}
		prev.onclick = function() {
			index--;
			if (index < 0) {
				index = len - 1;
			}
			change(index);
		}
	}
	if (list) {
		var list = $(list).getElementsByTagName('li');
		for (var i = 0; i < len; i++) {
			list[i].title = i;
			list[i].onmouseover = function() {
				change(this.title);
			}
		}
	}
	function auto() {
		timer = setInterval(function() {
			index++;
			if (index >= len) {
				index = 0;
			}
			change(index);
		}, 2000);
	}
	function clear() {
		clearInterval(timer);
	}
	function change(curIndex) {
		pic.style.marginTop = -height * curIndex + 'px';
		if (list) {
			for (var n = 0; n < len; n++) {
				list[n].className = '';
			}
			list[curIndex].className = 'on';
		}
		index = curIndex;
	}
}