CSS3学习笔记

1.响应式设计
响应式网站设计(Responsive Web design)的理念是：
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。
无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。
响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

2.CSS3 media query

3.mobile first的响应式设计
三个优点：
需求驱动
针对移动设备加快了CSS代码的渲染速度
可以节约带宽

4.CSS3 transform（变换）
(1)transform 属性向元素应用 2D 或 3D 转换。
该属性允许我们对元素进行旋转、缩放、移动或倾斜。
取值为：
rotate(angle) 定义 2D 旋转，在参数中规定角度。例：transform:rotate(7deg);
scale(x,y) 定义 2D 缩放转换。
translate(x,y) 定义 2D 转换。即平移。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。

transform属性可以取多个值的组合，操作顺序从右往左。如：transform: translate(45px) rotate(7deg) scale(2);

(2)transform-origin 属性指定进行transform操作所依赖的基点的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
语法：transform-origin: x-axis y-axis z-axis;
x-axis 可能的值：left center right length %；
y-axis 可能的值：top center bottom length %；
z-axis 可能的值：length。


transform 和 transform-origin 这两个属性可以作用的元素是可变形元素；块级元素和inline-block元素都属于可变形元素，而行内元素不属于。
不是的话就需要设置display属性。

兼容性：绝大部分的主流浏览器都是支持的。建议一般加上对应的厂商前缀。

5.CSS3 transition（过渡效果）
transition 属性是一个简写属性，用于设置四个过渡属性：
  .transition-property
  .transition-duration
  .transition-timing-function
  .transition-delay

注意：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
      并不是所有属性都是可动画属性。

transition-property——规定设置过渡效果的 CSS 属性的名称。
transition-duration——规定完成过渡效果需要多少秒或毫秒。
transition-timing-function——规定速度效果的速度曲线。
取值有：
  ease 默认值；规定慢速开始，然后变快，然后慢速结束的过渡效果。
  linear 规定以相同速度开始至结束的过渡效果。
  ease-in 规定以慢速开始的过渡效果。
  ease-out 规定以慢速结束的过渡效果。
  ease-in-out 规定以慢速开始和结束的过渡效果。

transition-delay——定义过渡效果何时开始。

transition——四个过渡属性的简写属性。默认值：all 0 ease 0;
              例如：transition: width 2s;

兼容性：IE10以下的版本是不支持的，其他几乎所有的主流浏览器都是支持的。
        建议一般加上对应的厂商前缀。

6.CSS3 animation（动画）
与transition的异同点：
相同点：二者所对应的UI状态的变化都不再是瞬时完成，而是有一个平滑变化的过程。
不同点：
  transition 所对应的UI状态的变化是单一的变化，即从一个UI状态平滑地变化为另一个UI状态；
  而animation 所对应的UI状态的变化可以是一系列UI状态的变化。

animation 属性是一个简写属性，用于设置六个动画属性：
  .animation-name
  .animation-duration
  .animation-timing-function
  .animation-delay
  .animation-iteration-count
  .animation-direction

注意：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了.


animation-name        规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay                规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction        规定是否应该轮流反向播放动画。


transition——六个过渡属性的简写属性。默认值：none 0 ease 0 1 normal;


如需在 CSS3 中创建动画，需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。


兼容性：IE10以下的版本是不支持的，其他几乎所有的主流浏览器都是支持的。

            建议一般加上对应的厂商前缀。