HTML5+CSS3 Web前端设计基础教程（第7章）.pptxVIP

Web前端设计 基础教程 HTML5+CSS3 07 CSS3与HTML5的高级应用 【本章导读】 本章将实际工作中经常出现，但理解稍难的知识加以汇总整理，着重向读者介绍一些CSS3与HTML5的主流应用，希望能够帮助读者进一步拓展思维，积累相关经验。 7.1 CSS Sprite技术 7.1.1 CSS Sprite技术分解 1．原理解析 图7-1 “天猫网”部分背景图像 2．优缺点 7.1 CSS Sprite技术 7.1.2 CSS Sprite技术的应用 图7-3 使用CSS Sprite技术所用到的配图 7.1 CSS Sprite技术 图7-4 “相机”图标移动示意图 图7-5 “地图”图标移动示意图 7.1 CSS Sprite技术 图7-6 background-position属性正负取值关系 7.2 CSS3渐变 1．Webkit引擎支持的CSS渐变语法 （1）线性渐变 （2）径向渐变 2．创建CSS 3渐变 图7-7 渐变预览效果 7.3 CSS3动画 7.3.1 变形——transform属性 1．旋转函数——rotate( ) 2．移动函数——translate( ) 3．缩放函数——scale ( ) 图7-8 transform属性预览效果 7.3 CSS3动画 7.3.2 过渡——transition属性 1．transition-property属性 2．transition-duration属性 3．transition-timing-function属性 4．transition-delay属性 5．transition属性 图7-9 鼠标未经过时预览效果 图7-10 鼠标经过时预览效果 7.3 CSS3动画 7.3.3 CSS 3动画的应用——“幽灵按钮” 1．什么是“幽灵按钮” 图7-11 “幽灵按钮”在某站点的应用 7.3 CSS3动画 2．“幽灵按钮”的实现 图7-12 “幽灵按钮”最终预览效果 7.4 CSS3选项卡 图7-17 “CSS3选项卡”最终预览效果分析 图7-18 “CSS3选项卡”结构分析示意图 7.4 CSS3选项卡 图7-21 细节放大示意图 7.5 HTML5 Canvas 7.5.1 创建画布并绘制简单图形 图7-22 创建画布并绘制简单图形 7.5 HTML5 Canvas 7.5.2 Canvas坐标、线条与圆 1．坐标系统 图7-23 图形上下文的笛卡尔坐标系 2．线条 3．圆形 图7-24 绘制线条 图7-25 绘制线条 谢谢观看！