滑动门、伪元素和过渡详解

滑动门

滑动门出现的背景

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了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>

总结：

1. a 设置 背景左侧，padding撑开合适宽度。
2. span 设置背景右侧，背景图片右对齐right， padding撑开合适宽度 剩下由文字继续撑开宽度。
3. 之所以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: 要过渡的属性  花费时间  运动曲线  何时开始;

鼠标放上去有阴影效果，0.5s慢慢展现

div{
        transition:all 0.5s;
}
div:hover{
margin-top:8px;
box-shadow:0 10px 5px 5px rgba(0,0,0,0.2)
    
}