css3个人学习笔记一

1.transition:

a.foo { padding : 5px 10px ; background : #578 ; color : #aa9 ; -moz-transition : all 0.3s ease ; }
a.foo:hover,a.foo:focus { background : #999 ; color : #ee6 ; }

其中transition:background 0.3s ease 1s参数分别表示属性,渐变时间,样式,延迟时间.
可以transition的属性可以为:width,opacity,position,font-size.
样式有六个属性:ease,ease-in,ease-out,ease-in-out,liner,cubic-bezier.

Transition me

2.text-shadow and rbga:
  

{ rgba(0,0,120,0.7); }
{ text-shadow : 1px 1px 1px #787 ; }

3.border-raduis:

{ border-raduis : 5px ; }

4.opcaity:

a img { opacity : 0.3 ;
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" ; /* IE-8 hack */
filter : alpha(opacity=30) ; /* IE-7 hack */ }
a:hover img { opacity : 0.8 ;
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" ; /* IE-8 hack */
filter : alpha(opacity=80) ; /* IE-7 hack */
}

  这样可以通过transition:opacity 0.3 ease-in-out.渐变不透明度

5.transform

这个属性变化多端,就先不叙述了,可以完成好多要JS才能完成的任务,先简单的学到这里吧!