CSS基础语法学习——溢出的文字隐藏，精灵技术，CSS3动画

一、溢出的文字隐藏

work-break:自动换行（主要处理英文单词）
- normal: 使用浏览器默认的换行规则
- break-all：允许在单词内换行
- keep-all: 只能在半角空格或连字符处换行
white-space
- 设置或检索对象内文本显示方式，通常我们使用于强制一行显示内容。
- normal:
- nowrap: 强制在同一行内显示所有文本，直到文本结束或者遭遇<br/>标签才换行
text-overflow: 文本溢出
- text-ocerflow: clip | ellipsis
- 设置或检索是否使用一个省略标记（……）标示对象内文本溢出
- clip:不显示省略号，只是简单的裁剪
- ellipsis: 当对象文本溢出时显示省略号标志
- 注：必须强调在一行内显示，text-overflow才有效果

二、CSS精灵技术（sprite）小妖精雪碧

精灵技术产生的背景：由于网站中会有较多小的背景图作为修饰，当图片过多时，服务器就会频繁的接收和发送请求，这会大大降低页面的加载速度。为了减少服务器接收和发送请求的次数，提高网页加载速度，出现了CSS精灵技术。
精灵技术的本质：是一种处理网页背景图像的方式，它将一个页面涉及到的零星背景集中到一张图上去。当用户请求时，只需要发送一次请求，页面中的所有背景图像即可展示出来。
精灵图的应用，整个页面的小图标背景在一张图上，需要使用背景时引用这张大图，然后通过background-position:设置位置偏移来显示出需要的背景。
注：若背景图片不算多，可以不用使用精灵图。因而存在维护麻烦的问题。
字体图标（iconfont）
- 字体图标的优点：
  - 可以做出和图片一样可以做的事情，改变透明度，旋转等
  - 本质是文字，可以很随意改变颜色，产生阴影，透明效果等
  - 本身体积小，但携带的信息并没有消弱
  - 几乎支持所有的浏览器
  - 移动端设备比较常用
- 字体图标使用流程（感觉比较麻烦）
  - UI人员设计字体图标效果图（svg）
  - 前端人员上传生成兼容性的字体文件包
  - 前端人员下载兼容字体文件包到本地
  - 把字体文件包引入到HTML页面中
滑动门
- 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动。
- 核心技术：CSS精灵（主要是背景位置），盒子padding撑开宽度，以适应不同字数的导航栏
- 经典布局
  1
  2
  3
  4
  5
  <li>
  <a href="#">
  <span> 书写文字内容</span>
  </a>
  </li>
- 具体实现步骤：
  - a设置背景左侧，padding撑开合适宽度。
  - span设置背景右侧，padding撑开合适宽度，剩下的由文字继续撑开宽度。
  - 之所以要a标签包含span是因为整个导航栏都需要点击。

三、CSS动画

过渡（CSS3）

在CSS3里使用transition可以实现补间动画（过渡效果)，并且当前元素只要有”属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。

transition：要过度的属性花费的时间运动曲线何时开始；（如果有多组属性变化可用逗号隔开）

属性	描述	CSS
transition	简写属性，用于一个属性中设置四个过渡属性	3
transition-property	规定应用过渡的CSS属性名称	3
transition-duration	定义过渡效果花费的时间，默认为0，单位为秒(s)	3
transition-timing-funtion	规定过渡效果的时间曲线，默认为“ease”	3
transition- delay	规定过渡效果何时开始，默认为0	3

运动曲线：linear(匀速)，esse(逐渐慢下来)，ease-in(加速)，ease-out(减速)，ease-in-out(先加速后减速)。
注：transition要添加在div里面而不是hover里面，如果加在hover里面则会在鼠标移开时瞬间返回原样，无还原过渡动画。

2D变形（CSS3）transform
- transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放
- 位移 translate(x,y)
  - transform:translate(x,y) 移动，平移。
  - 移动数值填写百分比不是以父级为参考，而是以自己的长或宽作为参考。
- 缩放 scale(x,y)
  - 可以对元素进行水平和垂直方向的缩放
  - 若只写一个参数，宽度与高度都缩放
- 旋转 rotate(deg)
  - deg代表旋转的度数，正值代表顺时针旋转，负值代表逆时针旋转
  - 旋转中心点的设置： transform-origin:center center(默认)
  - left top 左上角
  - left bottom 左下角
  - 设置精确单位 transform-origin:20px 20px;
- 倾斜 skew(deg,deg)
  - transform:skew(30deg,30deg)
3D变形（CSS3）transform
- 记住坐标：
  - X左边为负，右边为正
  - Y上边是负，下边为正
  - Z里面是负，外面是正
- rotateX（deg）代表元素绕着X轴旋转
- rotateY(deg) 代表元素绕着Y轴旋转
- rotateZ(deg) 类似于之际使用rotate进行旋转
透视（perspective）
- 透视原理：近大远小
- 浏览器透视：把近大远小的所有图像透视到屏幕上
- perspective:一般作为一个属性设置给父元素，作用于所有3D转换的子元素
- 视距越大透视效果越不明显，视距越小透视效果越明显。
- transform:translate3d(x,y,z) ; x,y可以是数值px，也可以是百分比。但z值只能为数值
- backface-visibility:hidden 不是正面对屏幕，就隐藏

四、动画（CSS3）animation

动画是CSS3具有颠覆性的特征之一，可通过设置多个结点来精确控制一个或一组动画，常用来实现复杂的动画效果。
- animation:动画名称动画时间动画曲线何时开始播放次数是否反向播放
- 动画名称自定义
定义动画 @keyframes
- 需要先定义动画才能应用动画
- 定义动画：
  1
  2
  3
  4
  @keyfranes 动画名称 {
  from{ 开始位置(0%) }
  to{结束位置(100%)}
  }
- 无限循环播放动画：animation-iteration-count:infinite
- 停止动画：animation-play-state:paused