HTML5+CSS3 Web前端设计基础教程 第3版 课件 第7章 CSS3与HTML5的高级应用_第1页
HTML5+CSS3 Web前端设计基础教程 第3版 课件 第7章 CSS3与HTML5的高级应用_第2页
HTML5+CSS3 Web前端设计基础教程 第3版 课件 第7章 CSS3与HTML5的高级应用_第3页
HTML5+CSS3 Web前端设计基础教程 第3版 课件 第7章 CSS3与HTML5的高级应用_第4页
HTML5+CSS3 Web前端设计基础教程 第3版 课件 第7章 CSS3与HTML5的高级应用_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第7章本章将实际工作中经常出现，但理解稍难的知识加以汇总整理，着重向读者介绍一些CSS3与HTML5的主流应用，希望能够帮助读者进一步拓展思维，积累相关经验。CSS3与HTML5的高级应用7.1CSSSprite技术7.1.1CSSSprite技术分解1．原理解析图7-1“天猫网”部分背景图像2．优缺点7.1CSSSprite技术7.1.2CSSSprite技术的应用图7-3使用CSSSprite技术所用到的配图7.1CSSSprite技术

图7-4“相机”图标移动示意图

图7-5“地图”图标移动示意图7.1CSSSprite技术图7-6background-position属性正负取值关系7.2CSS3渐变1．Webkit引擎支持的CSS渐变语法（1）线性渐变（2）径向渐变2．创建CSS3渐变图7-7渐变预览效果7.3CSS3动画7.3.1变形——transform属性1．旋转函数——rotate()2．移动函数——translate()3．缩放函数——scale()图7-8transform属性预览效果7.3CSS3动画7.3.2过渡——transition属性1．transition-property属性2．transition-duration属性3．transition-timing-function属性4．transition-delay属性5．transition属性图7-9鼠标未经过时预览效果

图7-10鼠标经过时预览效果7.3CSS3动画7.3.3CSS3动画的应用——“幽灵按钮”1．什么是“幽灵按钮”图7-11“幽灵按钮”在某站点的应用7.3CSS3动画2．“幽灵按钮”的实现图7-12“幽灵按钮”最终预览效果7.4CSS3选项卡图7-17“CSS3选项卡”最终预览效果分析图7-18“CSS3选项卡”结构分析示意图7.4CSS3选项卡选项卡最外层细线由container容器提供“青年”选项卡左右两侧的细线由select类规则提供此处是有底部边框的，只不过边框颜色为白色，与底部背景颜色相同，“看起来像”没有而已此处贯穿左右的1像素灰色细线，由container-tit容器中的li元素提供图7-21细节放大示意图7.5HTML5Canvas7.5.1创建画布并绘制简单图形图7-22创建画布并绘制简单图形7.5HTML5Canvas7.5.2Canvas坐标、线条与圆1．坐标系

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论