08.27学习笔记

本周主要开始学习动画。

Border-radius  圆角（50%是圆）

Box-shadow:x y r color;

X 是正负数 正数说明阴影往右  y为正数 阴影往下  r 就是阴影的范围  color 就是阴影的颜色。

 

2d空间

平移：translate

缩放：scale

旋转：rotate

拉伸：skew

 

Transform :转换，我们如果需要给元素添加2d效果，先给元素添加transform属性。

上面的四种方法是transform的属性值。

（注意:各个浏览器的版本问题。浏览器兼容的本质:是浏览器自己内核决定的。）

Translate()

Translate() 方法有两个参数，分别是x轴和y轴。

Rotate() 旋转 参数里的单位是deg 就是角度的意思。

如果出现多个效果的时候

Scale() 缩放

两个参数，一个是决定水平方向，一个是决定上下的

如果是一个参数，xy都是一样的，等比例。

 

Skew() 拉伸

 

过渡 transition

Transition后面跟的值有哪些？ 过渡的属性  过渡花费的时间  过渡的速度 过渡延迟

 

Animation 动画

@keyframes 定义动画。

Chrome的内核前缀是webkit 火狐的内核前缀是moz  ie的内核前缀是ms

过渡和动画不能放在一起使用。