150   CSS

一,特性简介:
1,CSS3是在CSS2基础上开发,向后兼容,所以不必改变原有的页面设计
2,CSS3的特性在越来越多浏览器上得到支持,但是目前IE是兼容性不太好
二,具体特性:示例地址
1,背景图:多重背景
body
{
background-image:url(/learn/css3/bg_flower.gif),url(/learn/css3/bg_flower_2.gif);
}
2,文本效果:阴影
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
3,字体:自定义字体
4,2D和3D:转换,移动,缩放,转动,拉伸
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
5,过渡和动画:更生动酷炫的视觉效果
div#div4
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

6,选择器:更多样智能的选择器
 



Leave a Reply

Your email address will not be published. Required fields are marked *