Web前端开发项目教程 课件 8.2 设计爱心照片墙

Web前端开发主讲人：李娜设计爱心照片墙【任务目标】知识目标能力目标素质目标熟悉过渡动画的语法及功能；掌握过渡动画的属性设置。能够灵活进行过渡动画的属性设置；能够制作网页中的过渡动画效果。培养学生“精益”的工匠精神以及对所学知识灵活应用的能力。【任务效果图】【导学知识】一、过渡简介

transform属性所展现的只是一种变形效果，描述的是元素的静态样式。transition属性所展现的是一种过渡效果，能够呈现动画效果的快慢、渐弱等，通过CSS3中的transform属性和transition属性两者结合，可以使元素的变形效果过渡更自然。【导学知识】二、过渡属性的使用

将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”。transition：属性名持续时间过渡方法延迟时间

【导学知识】

★

transition-property：none|all|property过渡动画的属性名称

【导学知识】

★

transition-duration：持续时间，单位用秒（s）或者毫秒（ms）

【导学知识】★

transition-timing-finction：过渡效果的速度曲线

属性值描述linear匀速ease默认值，慢快慢ease-in慢快ease-out快慢ease-in-out慢快慢【导学知识】

★transition-delay：延迟时间，单位是秒（s）或者毫秒（ms）【导学知识】transition：属性名持续时间过渡方法延迟时间★

transition-property：none|all|property过渡动画的属性名称★

transition-duration：持续时间，单位用秒（s）或者毫秒（ms）★

transition-timing-finction：过渡效果的速度曲线★transition-delay：延迟时间，单位是秒（s）或者毫秒（ms）

【任务实现】1.效果示例

【任务实现】2.分析页面效果图

【任务实现】3.制作页面结构

【任务实现】4.定义页面CSS样式

★设置页面整体样式

★设置标题部分

★照片墙样式：整体控制照片墙布局整体控制图片样式整体单张图片样式

★控制链接样式【任务实现】4.定义页面CSS样式

★设置页面整体样式

*{margin:0;padding:0;}body{ background-color:#eee; } .main{ margin:50pxauto;} 【任务实现】4.定义页面CSS样式

★设置标题部分

h1{ font-size:55px; text-align:center;}【任务实现】4.定义页面CSS样式

★照片墙样式：整体控制照片墙布局整体控制图片样式整体单张图片样式

【任务实现】4.定义页面CSS样式

★照片墙样式：

【任务实现】4.定义页面CSS样式

★控制链接样式【任务实现】4.定义页面CSS样式

★控制链接样式img:hover{ cursor:pointer; transform:scale(1.5); transition:all0.8s; z-index:2;}【任务拓展】【任务小结】

这节课我们完成了“爱心照片墙”的制作，涉及到了图片的定位属性、层叠属性、transform属性、transition属性的应用，代码量较多，在编写过程中要谨遵代码的编写规范。“