哈喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！

志同道合的小伙伴跟我一起学习交流哦！

第二阶段 CSS320 滑动门技术及应用

1 滑动门技术背景

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

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。

2 滑动门实现原理

核心技术就是利用CSS精灵（主要是背景位置）和盒子 padding撑开宽度以便能适应不同字数的导航栏。

一般的经典布局都是这样的：

总结：

1 a设置背景左侧， padding撑开合适宽度。

2 span设置背景右侧， padding撑开合适宽度剩下由文字继续撑开宽度。

3 之所以a包含span就是因为整个导航都是可以点击的

3 滑动门技术实现

4 微信导航栏（一）

5 微信导航栏（二）

6 伪元素的本质

before和 after伪元素（详解）

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的CSS样式，表面上看上去貌似是页面的某些元素来展现，实际上是CSS样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。

注意

1 伪元素：before和 after添加的内容默认是inline元素；这个两个伪元素的 content属性，表示伪元素的内容，设置 before和 after时必须设置其 content属性，否则伪元素就不起作用。

2 伪元素是不占位置的。

7 鼠标经过显示边框

8 认识过渡效果

过渡（ transition是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或 JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

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

语法格式：

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

如果有多组属性变化，还是用逗号隔开。

transition-duration花费时间单位是秒s 比如0.5s这个单位必须写

运动曲线 默认是ease

何时开始 默认是0s 立马开始

9 仿照小米效果

​

看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。

本章已结束，下篇文章将分享《21 CSS3新增2D和3D属性及应》小伙伴们不要错过哟！