CSS3 入门级

 

 

从刚开始学习的选择器总共有十三种：

id class 标签 子代 后代 交集 并集 通配符 伪类 结构 属性 相邻 兄弟  

（全当复习，如果有用的话那就正好）

div[name=zhang]  这是属性选择器的写法；

 

学CSS3 之前得先了解一下各个浏览器的内核问题以及他们相对应的内核前缀；

谷歌的内核是 webkit       -webkt-

火狐的内核是 gecko　　-moz-

Ie的内核是 trident　　　 -ms-

Opera的内核是 presto　 -o-

国内的浏览器都是 webkit

 

 

C3中的过度属性transition

property（过度的属性）durtaion（定义过度效果花费的时间；默认是0）

transition-timing-function（时间曲线，默认的是ease）　　 delay（延迟

简写的是  transition：width 2s linear 1s;

 

Animation 动画

 

了解动画之前必须先了解keyframes规则

@keyframes  这里举个栗子吧~

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
//  下边这个是兼容写法
@-webkit-keyframes mymove          /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

 

还有好多属性

animation-direction：（他的属性值有好多：normal（正常播放）reverse（动画反向播放）alternate（奇数次正向播放；偶数次反向播放）alternate-reverse（与alternate相反）

 

animation-play-state: (属性值有 paused 暂停； running 运动）

 

animation-iteration-count: （他的属性值有 n[n次]  infinite[无限次]

 

 

2d  和 3d 

 

CSS3 中的 3d 和2d 特效都是方法（也就是说都是函数）提供了四个方法；

translate（）平移；两个参数 mpx npx；

rotate（）旋转； 参数是number deg（角度）

scale（）缩放； 参数是 2 是数字 1 代表不变；

skew（）拉伸 他们只是充当属性值的；Xdeg Ydeg

 

3D

1.原理：近大远小 有一个东西叫视距：perspective；

元素要有3d的效果 perspective 视距给他的父级元素

transform-style: preserve-3d;  3d的内部子元素成3d效果；