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;}
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.
2.text-shadow and rbga:
{rgba(0,0,120,0.7);}
{text-shadow:1px 1px 1px #787;}
{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*/
}
-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才能完成的任务,先简单的学到这里吧!
