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
来源：慕课网
