CSS3--学习第一天

1.text-shadow

text-shadow:1px  1px 1px #ccc,
　　　　　0 0 10px #fff,
　　　　　0 0 20px #fff,
	0 0 30px #fff,
	0 0 40px #ff00de,
	0 0 70px #ff00de,
	0 0 80px #ff00de,
	0 0 100px #ff00de,
	0 0 150px #ff00de;

2.transform-style

/*允许子元素具有3d效果*/
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;

3.animation

animation:run ease-in-out 9s infinite;
-webkit-animation:run ease-in-out 9s infinite;
-moz-animation:run ease-in-out 9s infinite;
-ms-animation:run ease-in-out 9s infinite;
-o-animation:run ease-in-out 9s infinite;

4.keyframes 关键帧动画

@keyframes run {
	0%{
		transform:rotateX(-5deg) rotateY(0);
	}
	50%{
		transform: rotateX(0) rotateY(180deg);
		text-shadow:1px  1px 1px #ccc,
			    0 0 10px #fff,
			    0 0 20px #fff,
			    0 0 30px #fff,
			    0 0 40px #3EFF3E,
			    0 0 70px #3EFFff,
			    0 0 80px #3EFFff,
			    0 0 100px #3EFFee,
			    0 0 150px #3EFFee;
	}
	100%{
		transform:rotateX(5deg) rotateY(360deg);
	}
}

　5.transform

　　常用的有:rotate() 旋转  translate() 移动  scale()缩放