CSS3 高级应用（过渡、变形、动画）、滤镜、精灵图、字体图标、CSS初始化、及相关技巧等

CSS3高级应用

在传统的Web设计中，当网页中需要显示动画或特效时，需要使用JavaScript脚本或者Flash来实现。在CSS3中，提供了对动画的强大支持，可以实现旋转、缩放、移动和过渡等效果。

过渡

属性	描述	属性值
transition-property	用于指定过渡效果	①none ②all ③property（定义多个属性用逗号分隔）
transition-duration	用于指定过渡的持续时间	s/ms
transition-timing-function	过渡效果的速度曲线	①linear：线性过渡 ②ease：平滑过渡（默认）③ease-in：由慢到快 ④ease-out：由快到慢 ⑤ease-in-out：由慢到快再到慢
transition-delay	过渡的延迟时间	s/ms
transition	复合属性	property duration timing-function delay（不能颠倒）（后两个可省略）

注意：谁做过渡给谁加

变形

transofrm：①none：不变形 ②transform-function：变形函数
变形函数：

函数	说明
translate（x-value,y-value）	省略第二个参数默认为0
scale（x-axis,y-axis）	省略第二个参数默认为第一个值
skew（x-angle,y-angle）	角度值，省略第二个默认为0
rotate（angle）	角度值

动画

（1）创建动画

@keyframes  动画名称（引用唯一标识）{
		@keyframes-selector{css-styles};
	}

keyframes-selector：关键帧选择器 值：百分比、from（0%）或者to（100%）
css-styles：

属性值	描述
animation-name	动画名称 ①none（默认 适用于所有块元素和行内元素）②keyframename
animation-duration	动画完成所需要的时间
animation-timing-function	动画曲线效果
animation-delay	延迟时间
animation-iteration-count	动画播放的次数 infinite（循环）
animation-direction	动画播放的方向 ①normal（默认）②alternate（奇数正向、偶数逆向）
animation	复合属性 animation-name animation-duration （必须有）

CSS3滤镜

CSS3 滤镜是对图像等图形元素执行视觉效果操作，如模糊，平衡对比度或亮度， 色彩饱和度等。

注意： 任何版本的 Internet Explorer 当前均不支持 CSS3 滤镜效果。较旧的 IE 版本支持非标准 filter 属性来创建诸如不透明度之类的效果，但是该功能已被弃用。

filter属性，该属性按提供的顺序接受一个或多个滤镜功能。

属性值	描述及参数
blur	设置模糊 （默认为0px）
brightness	设置图像亮度（默认为1 不允许负值）
contrast	调整图像对比度（默认为1 可为200%等）
drop-shadow	添加阴影（类似于box-shadow属性，参数为阴影水平偏移、垂直偏移、模糊半径、阴影颜色）
grayscale	转换为灰度（默认为0）
invert	反转效果（默认为0 不允许负值）
opacity	应用不透明度（默认为1）
sepia	复古效果(红褐色)效果（默认为0）使黑白照片具有暖色调，增强存档质量
saturate	调整饱和度（默认为1 可为200%等）

精灵技术

CSS Sprites 在国内很多人叫 css 精灵，是一种网页图片应用处理方式。在网页访问中，客户端每需要访问一张图片都会向服务器发送请求，所以， 访问的图片数量越多，请求次数也就越多，造成延迟的可能性也就越大。
而应用精灵技术，它允许将一个页面涉及到的所有零星图片都包含到一张大图中去，当访问该页面时，载入的图片就不会像以前那样一幅一幅地显示出来。

总结：减少服务器请求次数，提高页面加载速度

制作精灵图遵循原则：

• 精灵图上放的都是小的装饰性的背景图片，插入图片不能往上放
• 精灵图的宽度取决于最宽的那个背景
• 可以横向摆放也可以纵向
• 移动背景图片位置，使用background-position 属性
• 一般情况下都是往上往左移动，所以数值是负值
• 使用精灵图需要精确测量，没个小背景图片的大小和位置

字体图标

主要用于显示网页中通用、常用的一些小图标。字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体

优点：

• 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
• 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
• 兼容性：几乎支持所有的浏览器，请放心使用

使用步骤：

• 字体图标的下载 （icomoon 字库、阿里 iconfont 字库 ）
• 字体图标的引入 （引入到我们html页面中）
• 字体图标的追加 （以后添加新的小图标）

CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化

简单理解： CSS初始化是指重设浏览器的样式 (也称为CSS reset）
每个网页都必须首先进行 CSS初始化

/* 把所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    text-decoration: none
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}

/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

Unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

比如：

• 黑体 \9ED1\4F53
• 宋体 \5B8B\4F53
• 微软雅黑 \5FAE\8F6F\96C5\9ED1

CSS相关技巧

CSS三角

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。

<div class="box"></div>

.box{
    width: 0;
    height: 0;
    /* 照顾兼容性 */
    line-height: 0;
    font-size: 0;
    border: 50px solid transparent;
    border-top-color: pink;
    margin: 100px auto;
}

CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

• 更改用户的鼠标样式
• 表单轮廓
• 防止表单域拖拽

鼠标样式 cursor

li {cursor: pointer; }

属性值	描述
default	默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线 outline

input {outline: none/0; }

防止拖拽文本域 resize

textarea{ resize: none;}

vertical-align属性应用

经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

属性值	描述
basline	默认，元素放在父元素基线上
top	元素顶端与行中最高元素的顶端元素对齐
middle	元素放在父元素中部
bottom	元素顶端与行中最低元素顶端对齐

属性应用：

• 图片、表单和文字对齐
  图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。 给图片、表单这些行内块元素的 vertical-align 属性设置为 middle
• 解决图片底部默认空白缝隙问题
  图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。①给图片添加 vertical-align:middle | top| bottom 等。(推荐) ②把图片转换为块级元素 display: block

溢出文字省略号显示

单行文本溢出显示省略号：

/*1. 先强制一行内显示文本*/
 white-space: nowrap; （ 默认 normal 自动换行）
 /*2. 超出的部分隐藏*/
 overflow: hidden;
 /*3. 文字用省略号替代超出的部分*/
 text-overflow: ellipsis;

多行文本溢出显示省略号：

多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内
核）

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;