任务十二：学习CSS 3的新特性

任务目的

• 学习了解 CSS 3 都有哪些新特性，并选取其中一些进行实战小练习

 

任务描述

• 实现 示例图（点击查看） 中的几个例子
• 实现单双行列不同颜色，且前三行特殊表示的表格
• 实现正常状态和focus状态宽度不一致的input文本输入框，且鼠标焦点进入输入框时，宽度的变化以动画呈现
• 不使用JavaScript，实现一个Banner图轮流播放的效果，且点击右下角的1，2，3可以切换到对应Banner图片

 

任务注意事项

• 本任务只涉及 HTML 及 CSS
• HTML 及 CSS 代码结构清晰、规范
• 除了任务中的3个小任务，尽可能多地尝试 CSS 3 的其他新特性

 

 

任务完成与总结：

 整个任务能够分为三小块，第一块就是表格，难度并不大；

第二块是输入框的变化，需要注意一个问题：

 

第三块是我薄弱的地方，在这里好好总结下，首先，看下HTML结构 ：

 

 现在一步步来分析CSS代码，首先要把父盒子进行相对定位和溢出内容隐藏，而且父盒子需要设置一个背景色进行伪装，这是必须。接着ul和li都要设置绝对定位，其中ul的绝对定位以父盒子为参考物，而li的绝对定位则以ul为参考物。li的位置要向左偏离百分之百，在事件触发时调用slider-out动画：

有一点要理解的是，在li选择事件触发时，被选择的那个li执行的是slider-in动画，而不是全局的slider-out动画，目的是为了营造一个类似手风琴连贯的效果。

两个动画效果：

为了避免页面刷新和载入时有动画效果，因此设置了ul的动画：

 

更多详情点击查看效果，具体实现方式请查看源代码