寒假倒数第二周学习

css3新特性

1. filter 滤镜 将模糊or颜色偏移等图形效果应用于元素
2. calc() 在声明css属性值时执行一些计算 括号中可使用+ - * /来计算
   eg: width:calc(100%-30px);

过渡属性

在不使用flash和js时，当元素从一种样式变换为另一种样式时为元素添加效果

过渡动画：从一个状态 渐渐过渡 到另外一个状态（写在hover中）经常和hover一起搭配使用

transition：要过渡的属性 花费的时间 运动曲线 何时开始；

1. 何时开始：单位为秒，可以设置延迟触发以及撤走的时间。
2. 运动曲线 linear 匀速 eare 逐渐慢下来 e-in 加速 e-out减速 e-in-out先加速后减速。
3. 谁做过渡给谁加。是加给元素本身的选择器，而不是:hover。
4. 要改变两个属性 eg:transition:width--------，height-------;用,隔开而不是写两条;
   多条也是;
5. 想要所有属性都变化 在属性位置写上all。
6. 运动曲线 何时开始 可以省略

广义的html5

指的是html5+css3+js

web服务器

本地服务器：将自己电脑作为主机，一个局域网中的电脑就可以访问
远程服务器：利用域名访问网站

免费的远程服务器

http://free.3v.do/
利用curftp将所写文件传输到主机中

2D转换

2D转换是改变标签在二维平面上的位置和形状的一种技术

转换transform 可以实现元素的缩放scale，旋转rotate，位移translate等效果

移动 translate

1. 语法
   transform:translate(x,y);或者分开写
   transform:translateX(n);
   transform:translateY(n);

2. 重点

   1. 定义2D转换中的移动，沿着x和y轴移动元素。w
   2. translate最大的优点:不会影响到其他元素的位置
   3. translate中使用百分比单位时是相对于自身元素的宽度或高度
   4. 行元素没有效果
   5. x 和 y可以理解为坐标

3. 利用该属性让元素垂直居中
   先设置绝对定位为父元素的50%，再设置translate x y 为-50%

旋转 rotate

让元素在二维平面内顺时针旋转or逆时针旋转

1. 语法
   transform:rotate(度数)

2. 重点

   1. rotate里面跟度数，有单位deg。eg:rotate(45deg)
   2. 角度为正时，为顺时针。负时，为逆时针
   3. 默认旋转的中心点是元素的中心点

3. 两个外边框利用旋转得到一个三角箭头

转换中心点transform-origin

1. 语法
   transform-origin:X Y;
2. 重点
   1. 注意后面参数x和y用空格隔开
   2. x y默认转换的中心点是元素的中心点（50% 50%）
   3. 还可以给x y设置像素 or 方位名词

缩放 scale

1. 语法
   transform:scale(x,y);
   x代表的是宽度，y代表的是高度; 只是数字代表的是倍数
2. 重点
   1. x和y用，隔开
   2. transform:scale(1，1); 宽和高都放大一倍，相当于没有放大
   3. transform:scale(2，2);宽和高都放大二倍
   4. 只写一个参数，表示两个参数一样
   5. 参数小于1，则缩小
   6. scale可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

2D转换综合写法

1. 格式: transform:translate() rotate() scale()… 用空格隔开
2. 其顺序会影响转换效果（先旋转会改变坐标轴方向 移动是按照一开始的坐标轴来移动的）
3. 当我们同时有移动和其他属性时，要将移动放在最前面。

动画

动画（animation），可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

动画可以实现更多的变化，更多的控制，连续自动播放等效果（过渡必须要是鼠标经过，而动画可以自己动）

一.动画的基本使用

1. 先定义动画

1. 语法
   @keyframes 动画名称{
   开始状态
   0%{
   css样式
   }
   结束状态
   100%{
   css样式
   }
   每一个节点叫做动画序列
   }
   0%等价于from。100%等价于to

2. 可以改变任意多的样式以及任意多的次数；即可设置多个节点
   eg：想要在时间的一半添加一个节点，可写
   50%{
   css样式
   }
   多个节点时，利用2D转换移动，坐标轴就只是相较于刚开始的盒子，坐标轴不会随着盒子位置的变化而变化,transform: translate(x,y);里面的x和y就是坐标

2.再使用（调用）动画

1. 语法
   div{
   调用动画
   animation-name: 动画名称;
   持续时间
   animation-duration: 持续时间;
   }

二.动画的基本属性

1. 见图
   

想要动画走回来，而不是直接回来-direction:alternate:
盒子动画结束后，停在结束位置:-fill-mode:forwards;

3. 简写
   动画名称 持续时间 运动曲线 延迟时间 播放次数 是否反向 动画结束的状态
   不包含play-state，需要的话单独写