css3的基础知识总结

css3的兼容性

-webkit 为chrome和Safari的兼容前缀
-moz 为Firefox的兼容前缀
-ms 为IE的兼容前缀
-o 为opera的兼容前缀

1，边框

border-radius添加圆角边框
border-radius:50%;为一个圆
box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]
border-image:url() 10px 20px no-repeat;

2,颜色

color:rgba();

3,字体

@font-face{
font-family:"user-defined";
src:url(字体路径);
}
p{
font-family: "user-defined";
font-size: 16px;
}

文本阴影

text-shadow:x-offset y-offset blur color;

4,背景

background-origin: border-box | padding-box | content-box;

背·景的起始位置;

background-clip ： border-box | padding-box | content-box | no-clip;

背景的剪切;

background-image:url(),url();

多背景;

5,形变之旋转，扭曲，放缩，位移,-webkit-transform-style:-webkit-preserve-3d;

1,相对于自身的中心点旋转

-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);

2,相对于自身的中心点扭曲;

-webkit-transform:skew(45deg);
-moz-transform:skew(45deg);
transform:skew(45deg);

还有skewY()或者skewX();一个方向上的扭曲变形;
3,相对于原图片的大小进行放缩;

-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
transform:scale(0.8);

4,相对于原位置的位移translate(50%,50%);

-webkit-transform:translate(50%,50%);
-moz-transform:translate(50%,50%);
transform:translate(50%,50%);

5,设置元素的中心点tranform-origin:left top;

-webkit-transform-origin:left top;
-moz-transform-origin:left top;
transform-origin:left top;

css3中进行形变的旋转，扭曲，放缩，位移都是相对于自身的中心点进行的形变;

6,动画

过渡属性transition

transition-property:height;指定过渡动画的css属性;
transition-duration:2s;指定完成过渡动画所需的时间;
transition-timing-function:ease-in;指定动画的执行函数;
transition-delay:2s;指定开始动画的延迟时间；

div{
height:200px;
-webkit-transition-property:height;
-webkit-transition-duration:2s;
-webkit-transition-timing-function:ease-in;
-webkit-transition-delay:2s;
-moz-transition-property:height;
-moz-transition-duration:2s;
-moz-transition-timing-function:ease-in;
-moz-transition-delay:2s;
transition-property:height;
transition-duration:2s;
transition-timing-function:ease-in;
transition-delay:2s;
}
div:hover{
heihgt:400px;
}

7,@keyframes关键帧,以@keyframes开头，后跟动画名称加上{}

@keyframes round{//@-webkit-keyframes //@-moz-keyframes
0%{background-color:red;}
50%{background-color:green;}
100%{background-color:yellow;}
}

8,动画的调用

animate-name属性主要是用来调用@keyframes定义好的动画,animation-name:调用的动画名
span{
animation-name:round;
-webkit-animation-name:round;
-moz-animation-name:round;//动画名称
-ms-animation-name:round;//动画名称
-o-animation-name:round;//动画名称
-webkit-animation-duration:5s;//动画持续时间
-webkit-animation-timing-function:ease-out;//动画执行的函数
-webkit-animation-delay:0.2s;//动画的延迟时间
-webkit-animation-iteration-count:infinite||数值//动画执行的次数
-webkit-animation-direction:normal || alternate//奇次和偶次运动方向相反
-webkit-animation-play-state:runing ||paused//属性主要用来控制元素动画的播放状态
-webkit-animation-fill-mode:none||forwards||backwards||both;//用来控制动画执行到最后一帧时的状态
}

设置3D场景

//perspective远景透视图
-webkit-perspective:800; //3D物体距离屏幕的距离
-webkit-perspective-origin:50% 50%;//3D元素基点基于X,Y轴的位置

欢迎加入
前端学习交流群：461593224

作者： MGT360124
链接：http://www.imooc.com/article/19813
来源：慕课网

css3的基础知识总结