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

任务目的

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

任务描述

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

任务注意事项

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

任务完成与总结:

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

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

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

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

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

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

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

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

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

两个动画效果:

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

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

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

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

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

上一篇:Django项目部署在Linux下以进程方式启动


下一篇:STL标准库-Tuple