1。可扩展的搜索形式
人往往在sf.gg知道顶部导航栏是这样的：
当输入框获得焦点时，结果是这样的。
使用CSS3的过渡属性，我们可以简单地做一个类似的搜索形式：
HTML标记：
xml代码将内容复制到剪贴板。
搜索
CSS样式：
CSS代码将内容复制到剪贴板。
* {
保证金：0；
填充：0；
}
标题{
字体：黑体，Arial，无衬线字体；
显示块；
溢出：隐藏；
宽度：500px；
保证金：15px；
边界半径：3px；
背景颜色：# DDD；
}
searchform {形式。
容器包含标签和输入
宽度：200px；
保证金：5px；
填料：5px；
}
form.searchform输入{
宽度：90px；
Padding: 2px 0 3px 5px;
大纲：无；
字体大小：1.2em；
边框颜色：# Eee # CCC # CCC # Eee；
边界半径：10px；
根据WebKit / *核心浏览器厂商/前缀
WebKit的过渡：0.5s宽度；
}
form.searchform输入焦点{
宽度：400px； / *如果失去焦点，回到原来的长度。
}
form.searchform标签{
显示：无；标记是必要的，但不要出现。
}
设计素描 uff1a
违约:
获得焦点：
对于那些可以输入的控件，它们通常被称为字段。每个表单控件（除了提交按钮）都有一个相应的标签文本元素来描述控件所代表的数据。
2.css3过渡
实例：
CSS代码将内容复制到剪贴板。
WebKit的过渡：0.5s宽度；
注意：属性需要使用形式——与供应商前缀的过渡；mdash；这里的例子只有WebKit的属性（Chrome或Safari）前缀。
CSS3的过渡可以使CSS属性动画。通常由一些事件触发，突然变化的模式，如改变链接的颜色时，悬停，将逐步采用过渡后在指定时间内的变化。第一个CSS规则集的属性的初始状态和转换参数。二CSS规则集房地产目标状态的事件发生时。
一般来说，转换动画是由用户鼠标悬停触发的：悬停伪类规则和表单元素获得焦点：焦点伪类规则。此外，您可以在具有类名选择器的规则中设置新的状态，然后通过Javaｓｃｒｉｐｔ（或其他JS类库）添加类名来触发转换。添加类名的时间是鼠标单击或其他事件发生时。
有五个过渡属性：
过渡属性，转换CSS属性名称，如颜色，宽度；
过渡时间、过渡的时间，设置在秒或毫秒，如2S，500ms；
转换时序函数，转换速度函数，决定动画效果是否流畅，是第一次慢而快。
它是快速和缓慢的，例如放松、放松、放松或线性（默认）。
过渡延迟，在转型的启动延迟时间，设置在秒或毫秒，如1S，200ms；
过渡，过渡的速记属性，如过渡：颜色2s缓解1ms；。
注意：许多（并非全部）CSS属性可以由转换属性动画。
