滑动门
滑动门出现的背景
制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。
核心技术
核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一般的经典布局都是这样的：
.nav li {
float: left;
margin: 0 10px;
padding-top: 21px;
}
.nav li a {
display: block;
background: url(images/to.png) no-repeat;
color: #fff;
font-size: 14px;
line-height: 33px;
padding-left: 15px;
text-decoration: none;
}
.nav li a:hover {
background-image: url(images/ao.png);
}
.nav li a:hover span { /* 鼠标经过a a里面的span 也要变换背景 */
background-image: url(images/ao.png);
}
.nav li a span {
display: block;
line-height: 33px;
background: url(images/to.png) no-repeat right center;
padding-right: 15px;
}
<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>
总结：
- a 设置 背景左侧，padding撑开合适宽度。
- span 设置背景右侧，背景图片右对齐right， padding撑开合适宽度 剩下由文字继续撑开宽度。
- 之所以a包含span就是因为 整个导航都是可以点击的。
如果有行高的话，可以不写高度
before和after伪元素
/* .one 类选择器 :hover 伪类选择器 ::after 伪元素选择器 /
伪元素选择器 本质上是 插入一个元素（标签 盒子） 只不过是行内元素 span a
div:hover::before / 鼠标经过之后 前面插入一个伪元素 /
box-sizing: border-box; / 把padding 和 border 都算入 width 里面 */
过渡(CSS3)
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
鼠标放上去有阴影效果，0.5s慢慢展现
div{
transition:all 0.5s;
}
div:hover{
margin-top:8px;
box-shadow:0 10px 5px 5px rgba(0,0,0,0.2)
}
