网页设计与开发第11章CSS中的变形与动画.ppt

11-1 应用transform属性的哪些函数可以实现2D平移。 11-2 应用transform属性的哪个函数可以实现2D旋转。 11-3 应用transform属性的哪个函数可以实现2D倾斜。 11-4 应用transform属性的什么函数可以实现缩放。 11-5 CSS为Animation动画提供哪9个属性。 习题 * 【例11-5】 在IE浏览器下更改变换的中心点为左上角；在Firefox浏览器下更改变换的中心点为右下角；在Chrome浏览器下更改变换的中心点为底边界的中心点，可以使用下面的代码。 #rotate{ -moz-transform-origin:bottom right; /*Firefox下设置中心点为右下角*/ -ms-transform-origin:top left; /*Firefox下设置中心点为左上角*/ -webkit-transform-origin:bottom; /*Firefox下设置中心点为底边界的中心点*/ -moz-transform:rotate(30deg); /*Firefox下顺时针旋转30度*/ -webkit-transform:rotate(30deg); /*Chrome下顺时针旋转30度*/ -o-transform:rotate(30deg); /*Opera下顺时针旋转30度*/ -ms-transform:rotate(30deg); /*IE下顺时针旋转30度*/ } 在IE 9浏览器下的运行结果如图11-5所示；在Firefox浏览器下的运行结果如图11-6所示； 图11-5 在IE 9浏览器下的运行结果 图11-6 在Firefox浏览器下的运行结果 在Chrome浏览器下的运行结果如图11-7所示 图11-7 在Chrome浏览器下的运行结果 11.2 过渡效果 11.2.1 指定过渡持续的时间 11.2.2 指定参与过渡的属性 11.2.3 指定过渡的动画类型 11.2.4 指定过渡的延迟时间 在CSS中使用transition-duration属性可以指定过渡持续的时间，该属性的语法格式如下： transition-duration：time[ ,time ]* 属性值说明： time：用于指定过渡持续的时间，默认值为0，如果存在多个属性值，以逗号“,”进行分隔。 说明： 目前主流浏览器并未支持标准的transition-duration属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。 11.2.1 指定过渡持续的时间 【例11-6】 应用transition-duration属性实现当鼠标移入时逐渐旋转的动画效果，关键代码如下： style .preview{ background:url(images/style0.gif) no-repeat; /*设置背景图片，并且不重复*/ position:absolute; /*设置为绝对布局*/ top:10px; /*设置顶边距*/ left: 30px; /*设置左边距*/ width:240px; /*设置宽度*/ height:210px; /*设置高度*/ } #rotate{ -moz-transition-duration:1.5s; /*设置过渡持续的时间*/ -webkit-transition-duration:1.5s; /*设置过渡持续的时间*/ -o-transition-duration:1.5s; /*设置过渡持续的时间*/ -ms-transition-duration:1.5s; /*设置过渡持续的时间*/ } #rotate:hover{ top:50px; -moz-transform:rotate(30deg); /*Firefox下顺时针旋转30度*/ -webkit-transform:rotate(30deg); /*Chrome下顺时针旋转30度*/ -o-transform:rotate(30deg); /*Opera下顺时针旋转30度*/ -ms-transform:rotate(30deg); /*IE下顺时针旋转30度*/ } ? #wall{ background-