网页设计与开发第10章CSS常用属性.ppt

#bar:hover{ /*实现在Chrome和Safari浏览器的动画效果*/ -webkit-animation-name:complexAnim; /*指定动画名称*/ -webkit-animation-duration:5s; /*指定动画持续的时间*/ -webkit-animation-iteration-count:1; /*指定仅执行1次*/ -webkit-animation-fill-mode:forwards; /*设置对象状态为动画结束时的状态*/ /*实现在Firefox浏览器的动画效果*/ -moz-animation-name:complexAnim; /*指定动画名称*/ -moz-animation-duration:5s; /*指定动画持续的时间*/ -moz-animation-iteration-count:1; /*指定仅执行1次*/ -webkit-animation-fill-mode:forwards; /*设置对象状态为动画结束时的状态*/ } #bg{ background-image:url(images/upFile_bg.gif); max-width:400px; /*设置最大宽度*/ height:250px; /*设置最大高度*/ } #bar{ background-image:url(images/progressBar.gif); width:1px; height:13px; /style /head body style=margin:0px; div id=bg/div div id=progdiv id=bar/div/div （1）在CSS中提供了transform和transform-origin两个用于实现2D变换的属性。其中，transform属性用于实现平移、缩放、旋转和倾斜等2D变换，而transform-origin属性则是用于设置变换的中心点的。 （2）translate(length[,length])表示实现2D平移。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0。 （3）translateX(length)表示在X轴（水平方向）上实现平移。参数length表示移动的距离。 （4）scaleX(number)表示在X轴上进行缩放。 （5）在CSS中，提供了transform-origin属性来更改变换的中心点。 （6）CSS提供了用于实现过渡效果的Transition属性，该属性可以控制HTML元素的某个属性发生改变时经历的时间，并且以平滑渐变的方式发生改变，从而形成动画效果。 （7）Animation动画允许开发者定义多个关键帧，而且浏览器会自动计算并插入关键帧之间的虚拟关键帧，从而形成比较流畅的动画效果。 知识点提炼 11-1 应用transform属性的哪些函数可以实现2D平移。 11-2 应用transform属性的哪个函数可以实现2D旋转。 11-3 应用transform属性的哪个函数可以实现2D倾斜。 11-4 应用transform属性的什么函数可以实现缩放。 11-5 CSS为Animation动画提供哪9个属性。 习题 * 在CSS中，提供了transform-origin属性来更改变换的中心点。该属性可以提供两个参数值，也可以提供一个参数值。如果提供两个，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，该值将表示横坐标；纵坐标将默认为50%。 说明： 目前主流浏览器并未支持标准的transform-origin属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。 11.1.5 更改变换的中心点 transform-origin属性的语法格式如下： transform-origin：[ percentage | length | left | center① | right ] [ percentage | length | top | center② | bottom ]? 属性值说明如表11-2所示。 表11-2 transform-origin属性的属性值说明 属性值 说明 percentage 用百分比指定坐标值。可以为负值 length 用长度值指定坐标值。可以为负值 left 指定原点的横坐标为left，居左 center① 指定原点的横坐标为center，居中 right 指定原点的横坐标为r